graphdb-workbench 3.0.0-TR4 → 3.0.0-TR5

package/dist/css/bootstrap-graphdb-theme.css

@@ -1120,12 +1120,14 @@ main menu height*/
 }
 
 .btn:hover [class^="icon-"],
-.btn:hover .fa {
+.btn:hover .fa,
+.btn:hover .fa-kit {
     transform: scale(1.2);
 }
 
 .btn.disabled:hover [class^="icon-"],
-.btn.disabled:hover .fa {
+.btn.disabled:hover .fa,
+.btn.disabled:hover .fa-kit {
     transform: scale(1);
 }
 

package/dist/css/graphql/create-graphql-endpoint.css

@@ -0,0 +1,71 @@
+.create-graphql-endpoint-view {}
+
+/* ===============================================
+   Select Schema Source View
+   =============================================== */
+.create-graphql-endpoint-view .select-schema-source-view .schema-source-types {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.create-graphql-endpoint-view .select-schema-source-view .schema-source-container {
+    width: 100%;
+}
+
+.create-graphql-endpoint-view .select-schema-source-view .shapes-selector,
+.create-graphql-endpoint-view .select-schema-source-view .graphs-selector {
+    border: 1px solid #e0e0e0;
+    height: 300px;
+}
+
+.create-graphql-endpoint-view .select-schema-source-view .endpoint-configuration-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    width: 40%;
+    border: 1px solid #e0e0e0;
+}
+
+.create-graphql-endpoint-view .select-schema-source-view .endpoint-configuration-form .form-inline {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1em;
+}
+
+.create-graphql-endpoint-view .select-schema-source-view .endpoint-configuration-form .form-inline label {
+    margin-bottom: 0;
+}
+
+.create-graphql-endpoint-view .select-schema-source-view .endpoint-configuration-form .form-inline input,
+.create-graphql-endpoint-view .select-schema-source-view .endpoint-configuration-form .form-inline select {
+    width: 75%;
+}
+
+/* ===============================================
+   Configure endpoint view
+   =============================================== */
+
+.create-graphql-endpoint-view .endpoint-configuration-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 2em;
+}
+
+.create-graphql-endpoint-view .endpoint-configuration-container .dynamic-parameters-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    flex: 1;
+    border: 1px solid #e0e0e0;
+}
+
+.create-graphql-endpoint-view .endpoint-configuration-container .generation-overview {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    flex: 1;
+    border: 1px solid #e0e0e0;
+}

package/dist/css/graphql/graphql-endpoint-management.css

@@ -0,0 +1,28 @@
+.graphql-endpoint-management-view {
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .toolbar {
+    display: flex;
+    justify-content: space-between;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table thead .toggle {
+    /* fixed width to prevent expanding and shrinking of the first column when a row is expanded/collapsed  */
+    width: 40px;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table thead .endpoint_id {
+    width: 10%;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table thead .endpoint_label {
+    width: 20%;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table thead .endpoint-actions {
+    width: 5%;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table tbody .endpoint-description-row > td {
+    border-top: none;
+}

package/dist/css/wizard.css

@@ -0,0 +1,33 @@
+.wizard {
+
+}
+
+.wizard .wizard-steps {
+    display: flex;
+    justify-content: flex-start;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.wizard .wizard-steps .wizard-step {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    text-align: center;
+    border-bottom: 1px solid transparent;
+}
+
+.wizard .wizard-steps .wizard-step.active {
+    color: var(--primary-color);
+    border-bottom: 1px solid var(--primary-color);
+}
+
+.wizard .wizard-steps .wizard-step .step-title {
+    text-decoration: none;
+    color: unset;
+    padding: 1em;
+}
+
+.wizard .wizard-steps .wizard-step .step-decoration {
+    display: inline-block;
+    padding-right: 1em;
+}

package/dist/i18n/locale-en.json

@@ -733,6 +733,164 @@
             "endpoint_selector": {
                 "tooltip": "Select a GraphQL endpoint"
             }
+        },
+        "endpoints_management": {
+            "toolbar": {
+                "endpoints_filter": {
+                    "placeholder": "Filter by ID or Label"
+                },
+                "create_endpoint": {
+                    "label": "New endpoint",
+                    "tooltip": "Create a new GraphQL endpoint"
+                },
+                "import_schema": {
+                    "label": "Import schema definition",
+                    "tooltip": "Import a GraphQL endpoint schema definition"
+                }
+            },
+            "table": {
+                "column": {
+                    "id": "Id",
+                    "label": "Label",
+                    "is_default": "Default",
+                    "is_active": "Active",
+                    "modified_on": "Modified",
+                    "types_count": "Types",
+                    "props_count": "Properties",
+                    "actions": "Actions"
+                },
+                "actions": {
+                    "explore_endpoint": {
+                        "active": {
+                            "tooltip": "Explore the endpoint in the GraphQL Playground"
+                        },
+                        "inactive": {
+                            "tooltip": "The endpoint is not active and cannot be explored in the GraphQL Playground"
+                        }
+                    },
+                    "create_endpoint": {
+                        "label": "Create endpoint",
+                        "tooltip": "Create a new GraphQL endpoint"
+                    },
+                    "import_schema": {
+                        "label": "Import schema definition",
+                        "tooltip": "Import a GraphQL endpoint schema definition"
+                    },
+                    "configure_endpoint": {
+                        "label": "Configure endpoint",
+                        "tooltip": "Configure the GraphQL endpoint"
+                    },
+                    "delete_endpoint": {
+                        "label": "Delete endpoint",
+                        "tooltip": "Delete the GraphQL endpoint"
+                    },
+                    "export_schema": {
+                        "label": "Export schema definition",
+                        "tooltip": "Export the GraphQL endpoint schema definition"
+                    }
+                },
+                "messages": {
+                    "endpoints_filter_no_result": "No GraphQL endpoints found for current search criteria",
+                    "no_endpoints_in_repository": "No GraphQL endpoints found in the repository"
+                },
+                "labels": {
+                    "description": "Description"
+                }
+            }
+        },
+        "create_endpoint": {
+            "toolbar": {
+                "source_repository_selector": {
+                    "label": "Source repository",
+                    "tooltip": "Select the repository to use as the source for the schemas of the new GraphQL endpoint"
+                }
+            },
+            "wizard_steps": {
+                "select_schema_sources": {
+                    "title": "Select schema source",
+                    "source_type": {
+                        "graphql_schema_shapes": {
+                            "label": "GraphQL schema shapes"
+                        },
+                        "shacl_shapes": {
+                            "label": "OWL ontologies/SHACL shapes"
+                        }
+                    },
+                    "graphql_schema_shapes": {
+                        "title": "GraphQL schema shapes",
+                        "messages": {
+                            "no_schemas": "No GraphQL schema shapes were found in the selected repository. You can choose or browse other repositories or choose the other source.",
+                            "endpoint_per_shape": "Each GraphQL schema shape results in one endpoint"
+                        }
+                    },
+                    "shacl_shapes": {
+                        "title": "Set endpoint",
+                        "form": {
+                            "endpoint_id": {
+                                "label": "Endpoint ID",
+                                "tooltip": "The unique identifier for the new GraphQL endpoint. It must be unique within the repository.",
+                                "placeholder": "star-wars"
+                            },
+                            "vocabulary_prefix": {
+                                "label": "Vocabulary prefix",
+                                "tooltip": "Vocabulary prefix",
+                                "placeholder": "Select prefix"
+                            },
+                            "endpoint_label": {
+                                "label": "Endpoint label",
+                                "tooltip": "The label for the new GraphQL endpoint",
+                                "placeholder": "Star Wars"
+                            }
+                        },
+                        "source": {
+                            "use_all_graphs": {
+                                "label": "Use all graphs",
+                                "messages": {
+                                    "all_graphs": "All {{count}} graphs are included for endpoint creation"
+                                }
+                            },
+                            "use_shacl_shape_graph": {
+                                "label": "Use SHACL shape graph",
+                                "messages": {
+                                    "all_shacl_shape_graphs": "All {{count}} SHACL shape graphs are included for endpoint creation"
+                                }
+                            },
+                            "pick_graphs": {
+                                "label": "Select one or more graphs"
+                            }
+                        },
+                        "messages": {
+
+                        }
+                    }
+                },
+                "configure_endpoint": {
+                    "title": "Configure endpoint",
+                    "endpoint_parameters": {
+                        "title": "Parameters",
+                        "form": {}
+                    }
+                },
+                "actions": {
+                    "next": {
+                        "label": "Next"
+                    },
+                    "back": {
+                        "label": "Back"
+                    },
+                    "cancel": {
+                        "label": "Cancel",
+                        "tooltip": "Cancel the creation of the new GraphQL endpoint and return to the list of endpoints",
+                        "confirmation": {
+                            "title": "Cancel endpoint creation",
+                            "body": "Are you sure you want to cancel the creation of the new GraphQL endpoint?"
+                        }
+                    },
+                    "generate_endpoint": {
+                        "label": "Generate"
+                    }
+                }
+            }
         }
     },
     "config.name.label": "Config name",
@@ -1276,6 +1434,8 @@
     "menu.guides.label": "Interactive guides",
     "menu.plugins.label": "Plugins",
     "menu.graphql.label": "GraphQL",
+    "menu.graphql-endpoint-management.label": "Endpoint Management",
+    "menu.create-graphql-endpoint.label": "New endpoint",
     "menu.graphql-playground.label": "GraphQL Playground",
     "core.popover.get.url.query": "Get URL to query",
     "core.popover.shared.query.warning": "Query shared by another user. You may not edit or delete it.",

package/dist/i18n/locale-fr.json

@@ -733,6 +733,164 @@
             "endpoint_selector": {
                 "tooltip": "Sélectionnez un point de terminaison GraphQL"
             }
+        },
+        "endpoints_management": {
+            "toolbar": {
+                "endpoints_filter": {
+                    "placeholder": "Filtrer par ID ou par étiquette"
+                },
+                "create_endpoint": {
+                    "label": "Nouveau point de terminaison",
+                    "tooltip": "Créer un nouveau point de terminaison GraphQL"
+                },
+                "import_schema": {
+                    "label": "Définition du schéma d'importation",
+                    "tooltip": "Importer une définition de schéma de point de terminaison GraphQL"
+                }
+            },
+            "table": {
+                "column": {
+                    "id": "Id",
+                    "label": "Étiquette",
+                    "is_default": "Défaut",
+                    "is_active": "Active",
+                    "modified_on": "Modifié",
+                    "types_count": "Types",
+                    "props_count": "Propriétés",
+                    "actions": "Actes"
+                },
+                "actions": {
+                    "explore_endpoint": {
+                        "active": {
+                            "tooltip": "Explorez le point final dans le GraphQL Playground"
+                        },
+                        "inactive": {
+                            "tooltip": "Le point de terminaison n'est pas actif et ne peut pas être exploré dans GraphQL Playground"
+                        }
+                    },
+                    "create_endpoint": {
+                        "label": "Nouveau point de terminaison",
+                        "tooltip": "Créer un nouveau point de terminaison GraphQL"
+                    },
+                    "import_schema": {
+                        "label": "Définition du schéma d'importation",
+                        "tooltip": "Importer une définition de schéma de point de terminaison GraphQL"
+                    },
+                    "configure_endpoint": {
+                        "label": "Configurer le point de terminaison",
+                        "tooltip": "Configurer le point de terminaison GraphQL"
+                    },
+                    "delete_endpoint": {
+                        "label": "Supprimer le point de terminaison",
+                        "tooltip": "Supprimer le point de terminaison GraphQL"
+                    },
+                    "export_schema": {
+                        "label": "Définition du schéma d'exportation",
+                        "tooltip": "Exporter la définition du schéma du point de terminaison GraphQL"
+                    }
+                },
+                "messages": {
+                    "endpoints_filter_no_result": "Aucun point de terminaison GraphQL trouvé pour les critères de recherche actuels",
+                    "no_endpoints_in_repository": "Aucun point de terminaison GraphQL trouvé dans le référentiel"
+                },
+                "labels": {
+                    "description": "Description"
+                }
+            }
+        },
+        "create_endpoint": {
+            "toolbar": {
+                "source_repository_selector": {
+                    "label": "Référentiel source",
+                    "tooltip": "Sélectionnez le référentiel à utiliser comme source pour les schémas du nouveau point de terminaison GraphQL"
+                }
+            },
+            "wizard_steps": {
+                "select_schema_sources": {
+                    "title": "Sélectionner la source du schéma",
+                    "source_type": {
+                        "graphql_schema_shapes": {
+                            "label": "Formes de schéma GraphQL"
+                        },
+                        "shacl_shapes": {
+                            "label": "Ontologies OWL/formes SHACL"
+                        }
+                    },
+                    "graphql_schema_shapes": {
+                        "title": "Formes de schéma GraphQL",
+                        "messages": {
+                            "no_schemas": "Aucune forme de schéma GraphQL n'a été trouvée dans le référentiel sélectionné. Vous pouvez choisir ou parcourir d'autres référentiels ou choisir l'autre source.",
+                            "endpoint_per_shape": "Chaque forme de schéma GraphQL génère un point de terminaison"
+                        }
+                    },
+                    "shacl_shapes": {
+                        "title": "Définir le point final",
+                        "form": {
+                            "endpoint_id": {
+                                "label": "ID du point de terminaison",
+                                "tooltip": "L'identifiant unique du nouveau point de terminaison GraphQL. Il doit être unique dans le référentiel.",
+                                "placeholder": "star-wars"
+                            },
+                            "vocabulary_prefix": {
+                                "label": "Préfixe de vocabulaire",
+                                "tooltip": "Préfixe de vocabulaire",
+                                "placeholder": "Sélectionnez le préfixe"
+                            },
+                            "endpoint_label": {
+                                "label": "Étiquette du point de terminaison",
+                                "tooltip": "L'étiquette du nouveau point de terminaison GraphQL",
+                                "placeholder": "Star Wars"
+                            }
+                        },
+                        "source": {
+                            "use_all_graphs": {
+                                "label": "Utiliser tous les graphes",
+                                "messages": {
+                                    "all_graphs": "Les {{count}} graphes sont inclus pour la création de points de terminaison"
+                                }
+                            },
+                            "use_shacl_shape_graph": {
+                                "label": "Utiliser le graphe de forme SHACL",
+                                "messages": {
+                                    "all_shacl_shape_graphs": "Les {{count}} graphes de forme SHACL sont inclus pour la création de points de terminaison"
+                                }
+                            },
+                            "pick_graphs": {
+                                "label": "Sélectionnez un ou plusieurs graphes"
+                            }
+                        },
+                        "messages": {
+
+                        }
+                    }
+                },
+                "configure_endpoint": {
+                    "title": "Configurer le point de terminaison",
+                    "endpoint_parameters": {
+                        "title": "Paramètres",
+                        "form": {}
+                    }
+                },
+                "actions": {
+                    "next": {
+                        "label": "Suivant"
+                    },
+                    "back": {
+                        "label": "Retourner"
+                    },
+                    "cancel": {
+                        "label": "Annuler",
+                        "tooltip": "Annuler la création du nouveau point de terminaison GraphQL et revenir à la liste des points de terminaison",
+                        "confirmation": {
+                            "title": "Annuler la création du point de terminaison",
+                            "body": "Êtes-vous sûr de vouloir annuler la création du nouveau point de terminaison GraphQL?"
+                        }
+                    },
+                    "generate_endpoint": {
+                        "label": "Générer"
+                    }
+                }
+            }
         }
     },
     "config.name.label": "Nom de configuration",
@@ -1276,6 +1434,8 @@
     "menu.guides.label": "Guides interactifs",
     "menu.plugins.label": "Plugins",
     "menu.graphql.label": "GraphQL",
+    "menu.graphql-endpoint-management.label": "Gestion des points de terminaison",
+    "menu.create-graphql-endpoint.label": "Nouveau point de terminaison",
     "menu.graphql-playground.label": "GraphQL Playground",
     "core.popover.get.url.query": "Obtenir l'URL de la requête",
     "core.popover.shared.query.warning": "Requête partagée par un autre utilisateur. Vous ne pouvez pas la modifier ou la supprimer.",

package/dist/index.html

@@ -13,9 +13,9 @@
 
     <link rel="apple-touch-icon-precomposed" href="icon.png">
 
-    <script src="plugin-registry.js?v=3.0.0-TR4"></script>
-    <script src="plugins.js?v=3.0.0-TR4"></script>
-<link rel="shortcut icon" href="icon.png"><link href="vendor.a08cc5f4f3735b7995ef.css" rel="stylesheet"><link href="main.eacda46172ce68612ebe.css" rel="stylesheet"></head>
+    <script src="plugin-registry.js?v=3.0.0-TR5"></script>
+    <script src="plugins.js?v=3.0.0-TR5"></script>
+<link rel="shortcut icon" href="icon.png"><link href="vendor.a08cc5f4f3735b7995ef.css" rel="stylesheet"><link href="main.63445569f6ee6182d55c.css" rel="stylesheet"></head>
 
 <body>
 
@@ -175,6 +175,6 @@
 <script type="application/javascript">
     window.wbDevMode = false;
 </script>
-<script type="text/javascript" src="vendor.1b158b049e90a62e81c4.bundle.js"></script><script type="text/javascript" src="main.efe851a1efbb63dfa357.bundle.js"></script><script type="text/javascript" src="bundle.bb1bd582bb5e3c092573.bundle.js"></script></body>
+<script type="text/javascript" src="vendor.87e0b9d2fd826096cf01.bundle.js"></script><script type="text/javascript" src="main.96ef3d6910da4296aa98.bundle.js"></script><script type="text/javascript" src="bundle.f03702f69db014a4a726.bundle.js"></script></body>
 
 </html>

package/dist/js/angular/core/directives/autocomplete/templates/autocomplete.html

@@ -1,4 +1,4 @@
-<link href="css/autocomplete-select.css?v=3.0.0-TR4" rel="stylesheet"/>
+<link href="css/autocomplete-select.css?v=3.0.0-TR5" rel="stylesheet"/>
 
 <div class="autocomplete-select-wrapper">
     <div class="autocomplete-select">

package/dist/js/angular/core/directives/operations-statuses-monitor/templates/operations-statuses-monitor.html

@@ -1,4 +1,4 @@
-<link href="css/operations-statuses-monitor.css?v=3.0.0-TR4" rel="stylesheet"/>
+<link href="css/operations-statuses-monitor.css?v=3.0.0-TR5" rel="stylesheet"/>
 
 <div ng-if="activeOperations && activeOperations.operations && activeOperations.operations.length > 0"
      class="operations-statuses btn-group">

package/dist/js/angular/core/directives/rdfresourcesearch/templates/rdfResourceSearchTemplate.html

@@ -1,4 +1,4 @@
-<link href="css/rdf-resource-search.css?v=3.0.0-TR4" rel="stylesheet"/>
+<link href="css/rdf-resource-search.css?v=3.0.0-TR5" rel="stylesheet"/>
 
 <div ng-cloak>
     <div id="search-box"

package/dist/js/angular/core/directives/yasgui-component/templates/yasgui-component.html

@@ -1,4 +1,4 @@
-<link href="css/lib/ontotext-yasgui-web-component.css?v=3.0.0-TR4" rel="stylesheet">
+<link href="css/lib/ontotext-yasgui-web-component.css?v=3.0.0-TR5" rel="stylesheet">
 
 <ontotext-yasgui
     class="{{classToApply}}"

package/dist/js/angular/core/templates/cookie-policy/cookie-consent.html

@@ -1,4 +1,4 @@
-<link href="css/cookie-policy.css?v=3.0.0-TR4" rel="stylesheet"/>
+<link href="css/cookie-policy.css?v=3.0.0-TR5" rel="stylesheet"/>
 
 <div class="cookie-consent-modal" ng-show="showCookieConsent">
     <div class="cookie-consent-content">

package/dist/js/angular/core/templates/cookie-policy/cookie-policy.html

@@ -1,4 +1,4 @@
-<link href="css/cookie-policy.css?v=3.0.0-TR4" rel="stylesheet"/>
+<link href="css/cookie-policy.css?v=3.0.0-TR5" rel="stylesheet"/>
 
 <div class="cookie-policy-modal">
     <div class="title">{{'cookie.policy.title' | translate}}</div>

package/dist/js/angular/graphql/templates/configure-endpoint.html

@@ -0,0 +1,33 @@
+<div class="endpoint-configuration-view">
+
+    <h5 class="mt-2">
+        {{'graphql.create_endpoint.wizard_steps.configure_endpoint.endpoint_parameters.title' | translate}}</h5>
+
+    <div class="endpoint-configuration-container">
+        <form novalidate name="dynamicParametersForm" id="dynamicParametersForm" class="dynamic-parameters-form">
+            String mode: <br/>
+            Fetch: <br/>
+            Validate: <br/>
+            Implicit: <br/>
+        </form>
+
+        <div class="generation-overview">
+            generation overview
+        </div>
+    </div>
+
+    <div class="wizard-actions mt-2">
+        <button class="btn btn-secondary cancel-btn mr-1"
+                ng-click="cancel()">
+            {{'graphql.create_endpoint.wizard_steps.actions.cancel.label' | translate}}
+        </button>
+        <button class="btn btn-secondary back-btn mr-1"
+                ng-click="back()">
+            {{'graphql.create_endpoint.wizard_steps.actions.back.label' | translate}}
+        </button>
+        <button class="btn btn-primary generate-endpoint-btn"
+                ng-click="generateEndpoint()">
+            {{'graphql.create_endpoint.wizard_steps.actions.generate_endpoint.label' | translate}}
+        </button>
+    </div>
+</div>

package/dist/js/angular/graphql/templates/create-graphql-endpoint.html

@@ -0,0 +1,58 @@
+<link href="css/graphql/create-graphql-endpoint.css?v=3.0.0-TR5" rel="stylesheet"/>
+<link href="css/wizard.css?v=3.0.0-TR5" rel="stylesheet"/>
+
+<div class="create-graphql-endpoint-view">
+    <h1 id="title-container">
+        <span>{{title}}</span>
+        <page-info-tooltip></page-info-tooltip>
+    </h1>
+
+    <div core-errors></div>
+
+    <div onto-loader-new
+         ng-show="false"
+         class="create-graphql-endpoint-view-loader"
+         size="100">
+    </div>
+
+    <div class="create-graphql-endpoint-container">
+
+        <div class="toolbar">
+            <div class="form-inline">
+                <label
+                    for="sourceRepositorySelector">{{'graphql.create_endpoint.toolbar.source_repository_selector.label' | translate}}</label>
+                <select id="sourceRepositorySelector" ng-model="selectedSourceRepository"
+                        ng-options="repository as repository.label for repository in sourceRepositories"
+                        ng-change="onSelectedSourceRepositoryChange(selectedSourceRepository)"
+                        class="form-control source-repository-selector"
+                        gdb-tooltip="{{'graphql.create_endpoint.toolbar.source_repository_selector.tooltip' | translate}}"
+                        tooltip-placement="top">
+                </select>
+            </div>
+        </div>
+
+        <div class="wizard-container mt-2">
+            <div class="wizard">
+                <div class="wizard-steps">
+                    <div ng-repeat="step in wizardModel.steps" class="wizard-step" ng-class="{active: step.active}">
+                        <span class="step-title">{{'graphql.create_endpoint.wizard_steps.' + step.id + '.title' | translate}}</span>
+                        <span class="fa fa-chevron-right step-decoration"></span>
+                    </div>
+                </div>
+
+                <div class="wizard-content">
+                    <div ng-repeat="step in wizardModel.steps" ng-if="step.active" class="wizard-step-content">
+                        <div ng-switch="step.id">
+                            <div ng-switch-when="select_schema_sources">
+                                <select-schema-sources step-definition="step"></select-schema-sources>
+                            </div>
+                            <div ng-switch-when="configure_endpoint">
+                                <configure-endpoint step-definition="step"></configure-endpoint>
+                            </div>
+                            <!-- Add more components as needed -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>