graphdb-workbench 2.8.4 → 3.0.0-TR10

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

@@ -1,4 +1,4 @@
-<link href="css/cookie-policy.css?v=2.8.4" rel="stylesheet"/>
+<link href="css/cookie-policy.css?v=3.0.0-TR10" 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=2.8.4" rel="stylesheet"/>
+<link href="css/cookie-policy.css?v=3.0.0-TR10" rel="stylesheet"/>
 
 <div class="cookie-policy-modal">
     <div class="title">{{'cookie.policy.title' | translate}}</div>

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

@@ -0,0 +1,57 @@
+<link href="css/graphql/create-graphql-endpoint.css?v=3.0.0-TR10" rel="stylesheet"/>
+<link href="css/wizard.css?v=3.0.0-TR10" rel="stylesheet"/>
+
+<div class="create-graphql-endpoint-view">
+    <h1 id="title-container">
+        <span>{{title}}</span>
+        <page-info-tooltip></page-info-tooltip>
+    </h1>
+
+    <div class="core-errors-container" core-errors></div>
+
+    <div class="create-graphql-endpoint-container">
+
+        <div class="content">
+            <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>
+                                <div ng-switch-when="generate_endpoint">
+                                    <generate-endpoint step-definition="step"></generate-endpoint>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,168 @@
+<link href="css/graphql/graphql-endpoint-management.css?v=3.0.0-TR10" rel="stylesheet"/>
+
+<div class="graphql-endpoint-management-view">
+    <h1 id="title-container">
+        <span id="graphql-endpoint-management-title-label">{{title}}</span>
+        <page-info-tooltip></page-info-tooltip>
+    </h1>
+
+    <div core-errors></div>
+
+    <div onto-loader-new
+         ng-show="loadingEndpointsInfo"
+         class="graphql-endpoint-management-page-loader"
+         size="100">
+    </div>
+
+    <div ng-if="getActiveRepository() && !loadingEndpointsInfo" class="endpoint-management-container">
+
+        <div class="toolbar">
+            <div class="endpoints-filter">
+                <input type="text" ng-if="hasEndpoints" class="form-control endpoints-filter-field"
+                       placeholder="{{'graphql.endpoints_management.toolbar.endpoints_filter.placeholder' | translate}}"
+                       ng-model="filterTerm" ng-change="onEndpointsFilter(filterTerm)" aria-label="Filter endpoints"
+                       autocomplete="off">
+            </div>
+
+            <div class="actions">
+                <button class="btn btn-primary create-endpoint-btn" ng-click="startCreateEndpointWizard()"
+                        gdb-tooltip="{{'graphql.endpoints_management.toolbar.create_endpoint.tooltip' | translate}}">
+                    <span class="fa-kit fa-gdb-graphql"></span>&nbsp;
+                    <span>{{'graphql.endpoints_management.toolbar.create_endpoint.label' | translate}}</span>
+                </button>
+                <button class="btn btn-secondary import-schema-definition-btn ml-1" ng-click="importSchema()"
+                        gdb-tooltip="{{'graphql.endpoints_management.toolbar.import_schema.tooltip' | translate}}">
+                    <span class="fa fa-upload"></span>&nbsp;
+                    <span>{{'graphql.endpoints_management.toolbar.import_schema.label' | translate}}</span>
+                </button>
+            </div>
+        </div>
+
+        <div ng-if="!hasEndpoints" class="alert alert-info no-endpoints mt-2">
+            <span>{{'graphql.endpoints_management.table.messages.no_endpoints_in_repository' | translate}}</span>
+        </div>
+
+        <table ng-if="hasEndpoints" class="endpoints-info-table table mt-1"
+               aria-describedby="GraphQL endpoints info table">
+            <thead>
+            <tr>
+                <th scope="col" class="toggle"></th>
+                <th scope="col" class="endpoint-id">{{'graphql.endpoints_management.table.column.id' | translate}}</th>
+                <th scope="col" class="endpoint-label">
+                    {{'graphql.endpoints_management.table.column.label' | translate}}
+                </th>
+                <th scope="col" class="endpoint-is-default">
+                    {{'graphql.endpoints_management.table.column.is_default' | translate}}
+                </th>
+                <th scope="col" class="endpoint-is-active">
+                    {{'graphql.endpoints_management.table.column.is_active' | translate}}
+                </th>
+                <th scope="col" class="endpoint-modified-on">
+                    {{'graphql.endpoints_management.table.column.modified_on' | translate}}
+                </th>
+                <th scope="col" class="endpoint-types-count">
+                    {{'graphql.endpoints_management.table.column.types_count' | translate}}
+                </th>
+                <th scope="col" class="endpoint-props-count">
+                    {{'graphql.endpoints_management.table.column.props_count' | translate}}
+                </th>
+                <th scope="col" class="endpoint-actions">
+                    {{'graphql.endpoints_management.table.column.actions' | translate}}
+                </th>
+            </tr>
+            </thead>
+
+            <tr ng-if="operationInProgress" class="overlay-row">
+                <td colspan="9">
+                    <div class="endpoint-operation-progress" onto-loader-fancy size="100" hide-message="true"></div>
+                </td>
+            </tr>
+
+            <tbody>
+            <tr ng-repeat-start="endpoint in endpointsInfoList.endpoints track by endpoint.endpointId">
+                <td class="toggle-row">
+                    <a href="#" ng-click="toggleRow($event, $index)">
+                        <i class="fa fa-chevron-right" ng-if="expandedRow !== $index"></i>
+                        <i class="fa fa-chevron-down" ng-if="expandedRow === $index"></i>
+                    </a>
+                </td>
+                <td>
+                    <i ng-if="!endpoint.createdSuccessfully" class="fa-regular fa-circle-xmark status-failed"></i>
+                    <span ng-if="!endpoint.active"
+                          gdb-tooltip="{{'graphql.endpoints_management.table.actions.explore_endpoint.inactive.tooltip' | translate}}"
+                          class="endpoint-link">{{endpoint.endpointId}}</span>
+                    <a ng-if="endpoint.active" href="#" ng-click="onExploreEndpoint(endpoint)"
+                       gdb-tooltip="{{'graphql.endpoints_management.table.actions.explore_endpoint.active.tooltip' | translate}}"
+                       class="endpoint-link">{{endpoint.endpointId}}</a>
+                    <a href="#" ng-if="!endpoint.createdSuccessfully" ng-click="onShowEndpointReport(endpoint)"
+                       gdb-tooltip="{{'graphql.endpoints_management.table.actions.view_report.tooltip' | translate}}"
+                       class="endpoint-report-link btn btn-link">{{'graphql.endpoints_management.table.actions.view_report.label' | translate}}</a>
+                </td>
+                <td>{{endpoint.label}}</td>
+                <td>
+                    <label class="endpoint-default-state">
+                        <input type="radio" ng-model="selectedDefaultEndpoint.default" ng-value="endpoint.default"
+                               ng-disabled="!endpoint.createdSuccessfully"
+                               ng-change="setEndpointAsDefault(endpoint)"/>
+                    </label>
+                </td>
+                <td>
+                    <span ng-click="!endpoint.createdSuccessfully || toggleEndpointActiveState(endpoint)"
+                          class="toggle-active-state">
+                        <input type="checkbox" class="switch" ng-checked="endpoint.active"
+                               ng-disabled="!endpoint.createdSuccessfully"/>
+                        <label></label>
+                    </span>
+                </td>
+                <td title="{{endpoint.lastModified}}">{{endpoint.lastModified | date: 'yyyy-MM-dd'}}</td>
+                <td>{{endpoint.objectsCount}}</td>
+                <td>{{endpoint.propertiesCount}}</td>
+                <td>
+                    <div class="btn-group">
+                        <button class="btn btn-link secondary btn-sm open-endpoint-actions-btn"
+                                data-toggle="dropdown" aria-expanded="false"
+                                ng-if="true"
+                                ng-disabled="false">
+                            <i class="fa fa-ellipsis"></i>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-right endpoint-actions-menu">
+                            <button class="dropdown-item export-schema-btn" type="button"
+                                    ng-click="onExportSchema(endpoint)">
+                                <i class="fa fa-arrow-down-to-line"></i>&nbsp;
+                                <span>{{'graphql.endpoints_management.table.actions.export_schema.label' | translate}}</span>
+                            </button>
+                            <button class="dropdown-item configure-endpoint-btn" type="button"
+                                    ng-click="onConfigureEndpoint(endpoint)">
+                                <i class="fa fa-gear"></i>&nbsp;
+                                <span>{{'graphql.endpoints_management.table.actions.configure_endpoint.label' | translate}}</span>
+                            </button>
+                            <div class="dropdown-divider"></div>
+                            <button class="dropdown-item delete-endpoint-btn" type="button"
+                                    ng-click="onDeleteEndpoint(endpoint)">
+                                <i class="fa fa-trash-can"></i>&nbsp;
+                                <span>{{'graphql.endpoints_management.table.actions.delete_endpoint.label' | translate}}</span>
+                            </button>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+            <tr ng-repeat-end ng-if="expandedRow === $index" class="endpoint-description-row">
+                <td></td>
+                <td colspan="8">
+                    <strong>{{'graphql.endpoints_management.table.labels.description' | translate}}</strong>
+                    <div class="endpoint-description">{{endpoint.description}}</div>
+                </td>
+            </tr>
+            <tr ng-if="endpointsInfoList.endpoints.length === 0" class="no-results">
+                <td colspan="9">
+                    <div class="alert alert-info">
+                        <span>{{'graphql.endpoints_management.table.messages.endpoints_filter_no_result' | translate}}</span>
+                    </div>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+
+

package/dist/js/angular/graphql/templates/graphql-playground.html

@@ -0,0 +1,41 @@
+<link href="css/graphql/graphql-playground.css?v=3.0.0-TR10" rel="stylesheet"/>
+
+<div class="graphql-playground-view">
+    <h1 id="title-container">
+        <span id="graphql-playground-title-label">{{title}}</span>
+        <page-info-tooltip></page-info-tooltip>
+
+        <div ng-if="!loadingEndpoints && graphqlEndpoints.length" class="toolbar pull-right">
+            <select ng-model="selectedGraphqlEndpoint"
+                    ng-options="endpoint as endpoint.label for endpoint in graphqlEndpoints"
+                    ng-change="onGraphqlEndpointChange(selectedGraphqlEndpoint)"
+                    class="form-control graphql-endpoint-selector"
+                    gdb-tooltip="{{'graphql.playground.endpoint_selector.tooltip' | translate}}"
+                    tooltip-placement="top">
+            </select>
+        </div>
+    </h1>
+
+    <div core-errors></div>
+
+    <div onto-loader-new
+         ng-show="loadingEndpoints"
+         class="graphql-playground-page-loader"
+         size="100">
+    </div>
+
+    <div class="content" ng-if="initialized">
+        <div class="no-endpoints-view" ng-show="!loadingEndpoints && configuration === undefined && !graphqlEndpoints.length">
+            <div class="alert alert-warning">
+                <div ng-bind-html="'graphql.playground.message.no_schemas_in_repository' | translate | trustAsHtml"></div>
+            </div>
+        </div>
+
+        <div class="graphql-playground-container" ng-if="!loadingEndpoints && configuration && getActiveRepositoryNoError()">
+            <graphql-playground id="graphql-playground" configuration="configuration"></graphql-playground>
+        </div>
+    </div>
+</div>
+
+
+

package/dist/js/angular/graphql/templates/modal/endpoint-configuration-modal.html

@@ -0,0 +1,25 @@
+<link href="css/graphql/graphql-endpoint-configuration-modal.css?v=3.0.0-TR10" rel="stylesheet"/>
+
+<div class="modal-header">
+    <h3 class="modal-title">{{'graphql.endpoints_management.endpoint_configuration_modal.title' | translate}}</h3>
+</div>
+<div class="modal-body graphql-endpoint-configuration-modal-body">
+    <div class="graphql-endpoint-configuration-loader" onto-loader-new hide-message="true"
+         size="100" ng-show="loadingEndpointConfigurationSettings"></div>
+
+    <dynamic-form ng-if="!loadingEndpointConfigurationSettings" fields="endpointConfigurationSettings.settings"
+                  on-validity-change="handleValidityChange(valid)"
+                  form-ctrl="formCtrl">
+    </dynamic-form>
+</div>
+<div class="modal-footer mt-0">
+    <button type="button" class="btn btn-secondary cancel-btn" ng-click="cancel()">{{'common.cancel.btn' | translate}}</button>
+    <button id="graphql-endpoint-configuration-modal-submit"
+            class="btn btn-primary"
+            ng-disabled="!endpointConfigurationSettingsValid || savingEndpointSettings || formCtrl.$pristine"
+            ng-click="ok()" type="submit">
+        <span>{{'save.changes.label' | translate}}</span>
+        <span class="saving-endpoint-settings" ng-if="savingEndpointSettings" onto-loader-fancy hide-message="true"
+              size="15"></span>
+    </button>
+</div>

package/dist/js/angular/graphql/templates/modal/endpoint-generation-failure-result-modal.html

@@ -0,0 +1,41 @@
+<link href="css/graphql/endpoint-generation-failure-result-modal.css?v=3.0.0-TR10" rel="stylesheet"/>
+
+<div class="modal-header">
+    <button type="button" class="close" ng-click="close()"></button>
+    <h3 class="modal-title">{{'graphql.create_endpoint.wizard_steps.generate_endpoint.generation_failure_report.title' | translate}}</h3>
+</div>
+
+<div class="modal-body endpoint-generation-failure-result-modal-body">
+    <p>{{'graphql.create_endpoint.wizard_steps.generate_endpoint.generation_failure_report.reason_message' | translate}}</p>
+    <table class="report table table-bordered" aria-label="Endpoint generation failure report table">
+        <thead>
+        <tr class="labels-row">
+            <th scope="col">
+                <strong class="errors-count mr-2">{{'graphql.create_endpoint.wizard_steps.generate_endpoint.generation_failure_report.errors' |
+                translate: {errorCount: endpointReport.errors} }}</strong>
+                <strong class="warnings-count">{{'graphql.create_endpoint.wizard_steps.generate_endpoint.generation_failure_report.warnings' |
+                translate: {warningCount: endpointReport.warnings} }}</strong>
+            </th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr ng-repeat="error in endpointReport.messages.errors" class="error-row">
+            <td>
+                <div class="alert alert-danger">{{error}}</div>
+            </td>
+        </tr>
+        <tr ng-repeat="warning in endpointReport.messages.warnings" class="warning-row">
+            <td>
+                <div class="alert alert-warning">{{warning}}</div>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>
+
+<div class="modal-footer mt-0">
+    <button id="download-failure-report" class="btn btn-primary" ng-click="downloadReport()">
+        <i class="fa fa-arrow-down-to-line"></i>
+        <span>{{'graphql.create_endpoint.wizard_steps.generate_endpoint.generation_failure_report.actions.download_report.label' | translate}}</span>
+    </button>
+</div>

package/dist/js/angular/graphql/templates/modal/import-endpoint-definition-modal.html

@@ -0,0 +1,98 @@
+<link href="css/graphql/import-endpoint-definition-modal.css?v=3.0.0-TR10" rel="stylesheet"/>
+
+<div class="modal-header px-2">
+    <button type="button" class="close" ng-click="close()"></button>
+    <h3 class="modal-title">{{'graphql.endpoints_management.import_definition_modal.title' | translate}}</h3>
+</div>
+
+<div class="modal-body import-endpoint-definition-modal-body m-2">
+    <div class="toolbar">
+        <button ngf-select multiple ngf-accept="'{{allowedFileTypesString}}'" ngf-keep="false"
+                ngf-change="onFilesChange($files, $file, $newFiles, $duplicateFiles, $invalidFiles)"
+                class="btn btn-primary file-selector-btn">
+            <i class="fa fa-check"></i>
+            <span>{{'graphql.endpoints_management.import_definition_modal.actions.select_files.label' | translate}}</span>
+        </button>
+        <button ng-click="onImport()" ng-disabled="!definitionFiles || definitionFiles.size === 0 || uploadFinished"
+                class="btn btn-primary upload-btn ml-1">
+            <i class="fa fa-upload"></i>
+            <span>{{'graphql.endpoints_management.import_definition_modal.actions.import.label' | translate}}</span>
+        </button>
+    </div>
+
+    <div ng-show="progress >= 0" class="progress mt-1">
+        <div role="progressbar" class="progress-bar" style="width:{{progress}}%">
+            {{progress}}%
+        </div>
+    </div>
+
+    <div ng-if="!definitionFiles || definitionFiles.size === 0" class="upload-area mt-1" ngf-drop ngf-select
+         ngf-multiple="true" ngf-accept="'{{allowedFileTypesString}}'" ngf-keep="false" ngf-drag-over-class="dragover"
+         ngf-change="onFilesChange($files, $file, $newFiles, $duplicateFiles, $invalidFiles)">
+        <div class="no-files-placeholder">
+            {{'graphql.endpoints_management.import_definition_modal.messages.no_files_selected' | translate}}
+        </div>
+    </div>
+
+    <table ng-if="definitionFiles && definitionFiles.size > 0" class="table table-hover file-list mt-1">
+        <tr ng-repeat-start="definitionFile in definitionFiles.list" class="file-item">
+            <td class="file-info">
+                <strong class="file-name">{{definitionFile.file.name}}</strong>,
+                <em class="file-size">{{definitionFile.file.size | bytes}}</em>
+            </td>
+            <td class="import-status">
+                <span ng-if="!definitionFile.list" class="status tag"
+                      ng-class="definitionFile.viewStatus">{{definitionFile.statusMessage | translate}}</span>
+            </td>
+            <td>
+                <a href="#" ng-if="definitionFile.endpointId"
+                   ng-click="onExploreEndpoint(definitionFile.endpointId)"
+                   gdb-tooltip="{{'graphql.endpoints_management.import_definition_modal.actions.explore_endpoint.tooltip' | translate}}"
+                   class="endpoint-link">{{definitionFile.endpointId}}</a>
+                <a href="#" ng-if="definitionFile.report && definitionFile.status === ImportStatus.FAIL"
+                   ng-click="onOpenReport(definitionFile.report)"
+                   gdb-tooltip="{{'graphql.endpoints_management.import_definition_modal.actions.view_report.tooltip' | translate}}"
+                   class="report-link btn-link">
+                    {{'graphql.endpoints_management.import_definition_modal.actions.view_report.label' | translate}}
+                </a>
+            </td>
+            <td class="file-actions">
+                <button ng-if="!progress && definitionFile.status === ImportStatus.PENDING"
+                        ng-click="onRemoveFile(definitionFile)"
+                        class="btn btn-link btn-sm secondary remove-file-btn"
+                        gdb-tooltip="{{'graphql.endpoints_management.import_definition_modal.actions.remove_file.tooltip' | translate}}">
+                    <i class="icon-close"></i>
+                </button>
+            </td>
+        </tr>
+        <!-- Nested definition files from zip archives -->
+        <tr ng-repeat-end ng-if="definitionFile.list && definitionFile.list.list.length > 0"
+            ng-repeat="subFile in definitionFile.list.list" class="file-item sub-file">
+            <td class="file-info">
+                <span class="sub-file-indent">└─</span>
+                <strong class="file-name">{{subFile.filename}}</strong>
+            </td>
+            <td class="import-status">
+                <span class="status tag" ng-class="subFile.viewStatus">{{subFile.statusMessage | translate}}</span>
+            </td>
+            <td>
+                <a href="#" ng-if="subFile.endpointId"
+                   ng-click="onExploreEndpoint(subFile.endpointId)"
+                   gdb-tooltip="{{'graphql.endpoints_management.import_definition_modal.actions.explore_endpoint.tooltip' | translate}}"
+                   class="endpoint-link">{{subFile.endpointId}}</a>
+                <a href="#" ng-if="subFile.report && subFile.status === ImportStatus.FAIL"
+                   ng-click="onOpenReport(subFile.report)"
+                   gdb-tooltip="{{'graphql.endpoints_management.import_definition_modal.actions.view_report.tooltip' | translate}}"
+                   class="report-link btn-link">
+                    {{'graphql.endpoints_management.import_definition_modal.actions.view_report.label' | translate}}
+                </a>
+            </td>
+            <td class="file-actions"></td>
+        </tr>
+    </table>
+
+    <div class="file-format-info mt-1">
+        {{'graphql.endpoints_management.import_definition_modal.messages.allowed_file_types' | translate}}
+    </div>
+</div>
+

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

@@ -0,0 +1,29 @@
+<div onto-loader-new ng-if="loadingData" class="schema-sources-loader" size="100"></div>
+
+<div ng-show="!loadingData" 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">
+        <dynamic-form ng-if="endpointConfiguration.settings.hasSettings" fields="endpointConfiguration.settings.settings"
+                      on-validity-change="handleValidityChange(valid)"
+                      form-ctrl="formCtrl" class="generation-settings-form">
+        </dynamic-form>
+    </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 next-btn" ng-disabled="!endpointConfigurationSettingsValid || formCtrl.$pristine"
+                ng-click="next()">
+            {{'graphql.create_endpoint.wizard_steps.actions.next.label' | translate}}
+        </button>
+    </div>
+</div>

package/dist/js/angular/graphql/templates/step-generate-endpoint.html

@@ -0,0 +1,71 @@
+<div class="generate-endpoint-view">
+
+    <h5 class="mt-2">
+        {{'graphql.create_endpoint.wizard_steps.generate_endpoint.overview.title' | translate}}</h5>
+
+    <div class="generate-endpoint-container">
+        <div ng-if="!generatingEndpoint && !generationReport" class="endpoints-generation-overview">
+            <div ng-if="endpointsCountToGenerate > 0" class="alert alert-info generation-summary-message">
+                <span>{{'graphql.create_endpoint.wizard_steps.generate_endpoint.overview.for_shapes.info' |
+                translate: {
+                    activeRepoId: activeRepository,
+                    endpointsCount: endpointsCountToGenerate,
+                    stepLabel: stepLabel
+                } }}</span>
+            </div>
+
+            <h5 ng-if="generateFromGraphqlSchemaShapes" class="mt-1">
+                {{'graphql.create_endpoint.wizard_steps.generate_endpoint.overview.for_shapes.included_endpoints' | translate}}</h5>
+
+            <div class="endpoints-overview">
+                <div ng-repeat="endpointOverview in endpointsOverview.endpointList" class="endpoint-overview">
+                    <strong class="label">{{endpointOverview.label}}</strong> | <span
+                    class="uri">{{endpointOverview.uri}}</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="generation-progress" ng-if="generatingEndpoint && !generationReport" onto-loader-fancy size="25"
+             message="{{'graphql.create_endpoint.wizard_steps.generate_endpoint.messages.generation_progress' | translate}}"></div>
+
+        <div ng-if="!generatingEndpoint && generationReport" class="generation-report">
+            <h5 class="mt-2">
+                {{'graphql.create_endpoint.wizard_steps.generate_endpoint.overview.for_shapes.generated_endpoints' | translate}}</h5>
+
+            <div class="generation-report-list">
+                <div ng-repeat="endpointReport in generationReport.reports" class="endpoint-report">
+                    <i ng-if="endpointReport.createdSuccessfully" class="fa-regular fa-circle-check status-success"></i>
+                    <i ng-if="!endpointReport.createdSuccessfully" class="fa-regular fa-circle-xmark status-failed"></i>
+                    <a href="#" ng-if="endpointReport.createdSuccessfully"
+                       gdb-tooltip="{{'graphql.create_endpoint.wizard_steps.generate_endpoint.overview.for_shapes.explore_in_playground_link_tooltip' | translate}}"
+                       ng-click="exploreInPlayground(endpointReport)"
+                       class="endpoint-id">{{endpointReport.endpointId}}</a>
+                    <span ng-if="!endpointReport.createdSuccessfully"
+                          class="endpoint-id">{{endpointReport.endpointId}}</span>
+                    <a href="#" ng-if="!endpointReport.createdSuccessfully"
+                       ng-click="showEndpointReport(endpointReport)"
+                       class="btn btn-link endpoint-report-link">{{'graphql.create_endpoint.wizard_steps.generate_endpoint.overview.for_shapes.view_report_link' | translate}}</a>
+                </div>
+            </div>
+
+            <div class="alert alert-info manage-endpoints-info mt-2"
+                 ng-bind-html="'graphql.create_endpoint.wizard_steps.generate_endpoint.overview.for_shapes.manage_endpoints_info' | translate :
+                 {managementUrl: endpointUrl.ENDPOINT_MANAGEMENT} | trustAsHtml"></div>
+        </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()"
+                ng-disabled="generatingEndpoint">
+            {{'graphql.create_endpoint.wizard_steps.actions.generate_endpoint.label' | translate}}
+        </button>
+    </div>
+</div>