graphdb-workbench 3.0.0-TR9 → 3.0.0

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

@@ -2057,6 +2057,7 @@ code {
 	Tooltips
 -------------------------------------------------------------*/
 .angular-tooltip {
+    max-width: 300px;
     background-color: var(--secondary-color);
 }
 

package/dist/css/dynamic-form.css

@@ -0,0 +1,76 @@
+:root {
+    --form-element-height: 38px;
+    --vertical-margin: 1em;
+    --label-left-padding: 8px;
+}
+
+.dynamic-form-container {
+    width: 100%;
+}
+
+.dynamic-form-container .dynamic-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+
+.dynamic-form-container .dynamic-form .form-inline {
+    display: grid;
+    grid-template-columns: minmax(150px, 1fr) 2fr;
+    margin-bottom: var(--vertical-margin);
+    align-items: start;
+}
+
+.dynamic-form-container .dynamic-form .form-group .group-title {
+    height: var(--form-element-height);
+    margin-bottom: var(--vertical-margin);
+    display: flex;
+    align-items: center;
+}
+
+.dynamic-form-container .dynamic-form .form-group .group-title span {
+    display: inline-block;
+    padding-left: var(--label-left-padding);
+}
+
+.dynamic-form-container .dynamic-form .form-inline label {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding-left: var(--label-left-padding);
+    overflow-wrap: break-word;
+}
+
+.dynamic-form-container .dynamic-form .hidden-fields .form-inline label {
+    animation: highlight 0.5s 1 forwards;
+}
+
+@keyframes highlight {
+    0% {
+        background-color: rgba(255, 255, 255, 0);
+    }
+    100% {
+        background-color: var(--color-warning-light);
+    }
+}
+
+.dynamic-form-container .dynamic-form .form-inline input,
+.dynamic-form-container .dynamic-form .form-inline textarea,
+.dynamic-form-container .dynamic-form .form-inline select {
+    width: 100%;
+}
+
+.dynamic-form-container .dynamic-form .form-inline.boolean-field label {
+    cursor: pointer;
+}
+
+.dynamic-form-container .dynamic-form .form-inline input[type="checkbox"] {
+    width: auto;
+    align-self: center;
+    justify-self: start;
+}
+
+.dynamic-form-container .dynamic-form .form-inline:has(input[type="checkbox"]) {
+    height: var(--form-element-height);
+}

package/dist/css/export.css

@@ -245,3 +245,7 @@
 .clear-repository-btn {
     margin-right: 5px;
 }
+
+.download-all-graphs-btn .icon-download {
+    margin-top: -0.1em;
+}

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

@@ -1,9 +1,76 @@
-.create-graphql-endpoint-view {}
+:root {
+    --status-bar-height: 47px;
+}
+
+.page-content {
+    display: flex;
+    min-height: calc(100vh - var(--status-bar-height));
+}
+
+.main-container {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.footer {
+    flex-shrink: 0;
+}
+
+/* ===============================================
+   Grid layout for the create GraphQL endpoint view
+   =============================================== */
+.create-graphql-endpoint-view {
+    display: grid;
+    grid-template-areas:
+        "title-container"
+        "core-errors-container"
+        "create-graphql-endpoint-container";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto 1fr;
+    gap: .5em;
+    height: 100%;
+}
+
+.create-graphql-endpoint-view .title-container {
+    grid-area: title-container;
+}
+
+.create-graphql-endpoint-view .core-errors-container {
+    grid-area: core-errors-container;
+}
+
+.create-graphql-endpoint-view .create-graphql-endpoint-container {
+    grid-area: create-graphql-endpoint-container;
+}
+
+.create-graphql-endpoint-container .content {
+    display: grid;
+    grid-template-areas:
+        "toolbar"
+        "wizard-container";
+    grid-template-columns: 1fr;
+    gap: .5em;
+}
+
+.create-graphql-endpoint-container .toolbar {
+    grid-area: toolbar;
+}
+
+.create-graphql-endpoint-container .wizard-container {
+    grid-area: wizard-container;
+}
+
+/* =========== end of grid layout =========== */
 
 .create-graphql-endpoint-view .toolbar .source-repository-selector {
     width: 20em;
 }
 
+.create-graphql-endpoint-view .shuttle-multiselect .shuttle-panel .options-list .option-item .item-action {
+    padding-top: .2em;
+    padding-bottom: .2em;
+}
+
 /* ===============================================
    Select Schema Source View
    =============================================== */
@@ -28,35 +95,49 @@
     min-height: 300px;
 }
 
+/* The endpoint configs form */
+
 .create-graphql-endpoint-view .select-schema-source-view .endpoint-params-form {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     width: 50%;
+    min-width: 300px;
 }
 
 .create-graphql-endpoint-view .select-schema-source-view .endpoint-params-form .form-inline {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    gap: 1em;
     margin-bottom: 1em;
 }
 
 .create-graphql-endpoint-view .select-schema-source-view .endpoint-params-form .form-inline label {
-    margin-bottom: 0;
+    margin: 0;
 }
 
 .create-graphql-endpoint-view .select-schema-source-view .endpoint-params-form .form-inline input,
+.create-graphql-endpoint-view .select-schema-source-view .endpoint-params-form .form-inline textarea,
 .create-graphql-endpoint-view .select-schema-source-view .endpoint-params-form .form-inline select {
-    width: 75%;
+    width: 100%;
 }
 
 /* ===============================================
    Configure endpoint view
    =============================================== */
 
+.create-graphql-endpoint-view .endpoint-configuration-view .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 50%;
+}
+
+.create-graphql-endpoint-view .endpoint-configuration-view .toggle-advanced-settings {
+    margin-left: auto;
+    font-size: 1rem;
+}
+
 .create-graphql-endpoint-view .endpoint-configuration-container {
     display: flex;
     align-items: stretch;
@@ -64,6 +145,7 @@
 }
 
 .create-graphql-endpoint-view .endpoint-configuration-container dynamic-form {
+    display: block;
     width: 100%;
 }
 
@@ -71,30 +153,55 @@
    Generate endpoint view / Generation overview
    =============================================== */
 
+.create-graphql-endpoint-view .generate-endpoint-view {
+    height: 67vh;
+    display: flex;
+    flex-direction: column;
+}
+
 .create-graphql-endpoint-view .generate-endpoint-container {
+    position: relative;
     display: flex;
-    align-items: stretch;
+    flex-direction: column;
+    height: auto;
     width: 50%;
+    overflow: hidden;
 }
 
-.generate-endpoint-view .generate-endpoint-container .endpoints-overview {
+.create-graphql-endpoint-view .generate-endpoint-container .endpoints-generation-overview {
     display: flex;
     flex-direction: column;
-    align-items: stretch;
-    max-height: 300px;
+    height: 100%;
+}
+
+.generate-endpoint-view .generate-endpoint-container .endpoints-overview {
+    flex: 1;
+    min-height: 0;
     overflow-y: auto;
 }
 
+.generate-endpoint-view .generate-endpoint-container .endpoints-overview .endpoint-overview {
+    margin-top: .3em;
+}
+
 .generate-endpoint-view .generate-endpoint-container .generation-progress {
     display: flex;
     align-items: start;
 }
 
-.generate-endpoint-view .generate-endpoint-container .generation-report,
-.generate-endpoint-view .generate-endpoint-container .generation-report-list {
+.generate-endpoint-view .generate-endpoint-container .generation-report {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
     width: 100%;
-    max-height: 300px;
+}
+
+.generate-endpoint-view .generate-endpoint-container .generation-report-list {
+    flex: 1;
+    min-height: 0;
     overflow-y: auto;
+    padding: 10px 10px 10px 0;
 }
 
 .generate-endpoint-view .generate-endpoint-container .generation-report-list .endpoint-report {
@@ -102,12 +209,14 @@
     align-items: center;
     column-gap: 0.5em;
     width: 100%;
+    margin-top: .3em;
 }
 
 .generate-endpoint-view .generate-endpoint-container .generation-report-list .endpoint-report-link {
-    color: var(--primary-color);
+    padding: 0;
 }
 
+
 .generate-endpoint-view .generate-endpoint-container .generation-report-list .status-failed {
     color: var(--color-danger-dark);
 }

package/dist/css/graphql/graphql-endpoint-configuration-modal.css

@@ -3,6 +3,16 @@
     min-height: 300px;
 }
 
+.graphql-endpoint-configuration-modal .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.graphql-endpoint-configuration-modal .modal-header .toggle-advanced-settings {
+    margin-left: auto;
+}
+
 .graphql-endpoint-configuration-modal .graphql-endpoint-configuration-loader {
     position: absolute;
     top: 0;

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

@@ -10,23 +10,44 @@
     position: relative;
 }
 
-.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .toggle {
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .toggle-col {
     /* 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 .endpoint_id {
-    width: 10%;
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .status-col {
+    width: 40px;
 }
 
-.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .endpoint_label {
-    width: 20%;
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .endpoint-is-default-col,
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .endpoint-is-active-col {
+    text-align: center;
 }
 
-.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .endpoint-actions {
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .endpoint-actions-col {
     width: 5%;
 }
 
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .endpoint-report-link {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .endpoint-default-state,
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .endpoint-default-state input {
+    cursor: pointer;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .endpoint-actions,
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .numeric {
+    text-align: right;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .default-endpoint-selector,
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .active-endpoint-selector {
+    text-align: center;
+}
+
 .graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .endpoint-description-row > td {
     border-top: none;
 }
@@ -82,7 +103,3 @@
 .graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .status-success {
     color: var(--color-success-dark);
 }
-
-.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .endpoint-report-link {
-    color: var(--primary-color);
-}