graphdb-workbench 2.8.4 → 3.0.0-TR10

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

@@ -18,6 +18,8 @@
     /* Link decoration, see GDB-9013 before you touch these */
     --link-decoration-thickness: clamp(1px, 6%, 10px);
     --link-underline-offset: clamp(1px, 6%, 10px);
+    /* The base text color. This usually comes from the bootstrap, but in some cases it needs to be set explicitly. */
+    --base-text-color: #373a3c;
     /* The base background color that is used for panels and other similar elements */
     --base-background-color: #f7f7f7;
     /* The base background color that is used for selected panels or elements */
@@ -1118,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/dynamic-form.css

@@ -0,0 +1,38 @@
+.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;
+    gap: 1em;
+    margin-bottom: 1em;
+    align-items: start;
+}
+
+.dynamic-form-container .dynamic-form .form-inline label {
+    margin: 0;
+    overflow-wrap: break-word;
+}
+
+.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;
+}

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

@@ -0,0 +1,213 @@
+: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
+   =============================================== */
+.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-types label {
+    cursor: pointer;
+}
+
+.create-graphql-endpoint-view .select-schema-source-view .schema-source-container {
+    width: 100%;
+}
+
+.create-graphql-endpoint-view .select-schema-source-view .graphql-shapes-selector {
+    min-height: 300px;
+}
+
+.create-graphql-endpoint-view .select-schema-source-view .graphs-selector {
+    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 {
+    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: 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: 100%;
+}
+
+/* ===============================================
+   Configure endpoint view
+   =============================================== */
+
+.create-graphql-endpoint-view .endpoint-configuration-container {
+    display: flex;
+    align-items: stretch;
+    width: 50%;
+}
+
+/* ===============================================
+   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;
+    flex: 1;
+    min-height: 0;
+    width: 50%;
+}
+
+.create-graphql-endpoint-view .generate-endpoint-container .endpoints-generation-overview {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.generate-endpoint-view .generate-endpoint-container .endpoints-overview {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+}
+
+.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 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.generate-endpoint-view .generate-endpoint-container .generation-report,
+.generate-endpoint-view .generate-endpoint-container .generation-report-list {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+}
+
+.generate-endpoint-view .generate-endpoint-container .generation-report-list .endpoint-report {
+    display: flex;
+    align-items: center;
+    column-gap: 0.5em;
+    width: 100%;
+    margin-top: .3em;
+}
+
+.generate-endpoint-view .generate-endpoint-container .generation-report-list .endpoint-report-link {
+    padding: 0;
+}
+
+
+.generate-endpoint-view .generate-endpoint-container .generation-report-list .status-failed {
+    color: var(--color-danger-dark);
+}
+
+.generate-endpoint-view .generate-endpoint-container .generation-report-list .status-success {
+    color: var(--color-success-dark);
+}

package/dist/css/graphql/endpoint-generation-failure-result-modal.css

@@ -0,0 +1,7 @@
+.endpoint-generation-failure-result-modal .report td {
+    padding: 0;
+}
+
+.endpoint-generation-failure-result-modal .report td .alert {
+    margin: 0;
+}

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

@@ -0,0 +1,19 @@
+.graphql-endpoint-configuration-modal .graphql-endpoint-configuration-modal-body {
+    position: relative;
+    min-height: 300px;
+}
+
+.graphql-endpoint-configuration-modal .graphql-endpoint-configuration-loader {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1050;
+    pointer-events: all;
+}

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

@@ -0,0 +1,84 @@
+.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 {
+    position: relative;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .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 .endpoint_id {
+    width: 10%;
+}
+
+.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-actions {
+    width: 5%;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .endpoint-description-row > td {
+    border-top: none;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .row-overlay {
+    position: relative;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .row-overlay:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+    z-index: 1;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .overlay-row {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .overlay-row td {
+    padding: 0;
+    border: none;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .body-overlay:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+    z-index: 1;
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .status-failed {
+    color: var(--color-danger-dark);
+}
+
+.graphql-endpoint-management-view .endpoint-management-container .endpoints-info-table .status-success {
+    color: var(--color-success-dark);
+}

package/dist/css/graphql/graphql-playground.css

@@ -0,0 +1,189 @@
+html, body {
+    height: 100vh;
+}
+
+.page-content,
+.page-content .container-fluid {
+    height: calc(100% - 70px);
+}
+
+.graphql-playground-view,
+.content,
+.graphql-playground-container,
+graphql-playground,
+.graphql-playground-component {
+    display: block;
+    height: 100%;
+}
+
+graphql-playground {
+    padding-bottom: 16px;
+}
+
+.graphql-playground-view #title-container {
+    margin-bottom: 16px;
+}
+
+.graphql-playground-view graphql-playground-component {
+    height: 100%;
+}
+
+.graphql-playground-view .toolbar {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    margin-bottom: 16px;
+}
+
+.graphql-playground-view .toolbar .graphql-endpoint-selector {
+    width: 300px;
+}
+
+/* =============================================== */
+/*   overrides for graphql-playground component    */
+/* =============================================== */
+
+.graphql-playground-view #graphiql * {
+    border-radius: 0;
+    font-size: 1rem;
+    font-family: var(--main-font);
+}
+
+.graphql-playground-view #graphiql .graphiql-container .graphiql-sidebar {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.graphql-playground-view #graphiql .graphiql-sidebar button {
+    color: var(--primary-color);
+}
+
+/* Hide the settings button */
+.graphql-playground-view #graphiql .graphiql-sidebar button[data-value="settings"] {
+    display: none;
+}
+
+.graphql-playground-view #graphiql .graphiql-sessions {
+    margin-top: 0;
+    margin-right: 0 !important;
+    margin-bottom: 0;
+    background-color: var(--base-background-color);
+}
+
+/* Hide the graphql logo */
+.graphql-playground-view #graphiql .graphiql-sessions .graphiql-logo {
+    display: none;
+}
+
+.graphql-playground-view #graphiql .graphiql-sessions .graphiql-session-header {
+    height: unset;
+    color: inherit;
+}
+
+.graphql-playground-view #graphiql .graphiql-sessions .graphiql-session-header button.graphiql-tab-add {
+    padding: 8px;
+}
+
+.graphql-playground-view #graphiql .graphiql-sessions .graphiql-session-header .graphiql-tabs {
+    margin-bottom: 0;
+    padding-left: 18px;
+    font-size: 1rem;
+}
+
+.graphql-playground-view #graphiql .graphiql-sessions .graphiql-session-header .graphiql-tabs .graphiql-tab-active {
+    background-color: var(--base-background-hover-color);
+}
+
+.graphql-playground-view #graphiql .graphiql-sessions .graphiql-session-header .graphiql-tabs .graphiql-tab-button {
+    padding: 4px 8px;
+    color: var(--base-text-color);
+}
+
+.graphql-playground-view #graphiql .graphiql-sessions .graphiql-session {
+    padding: 0 18px 18px;
+}
+
+/* When there is a single opened tab in the editor */
+.graphql-playground-view #graphiql .graphiql-sessions .graphiql-editors.full-height {
+    margin-top: -13px;
+}
+
+.graphql-playground-view #graphiql .graphiql-sessions .graphiql-editors .graphiql-toolbar button.graphiql-execute-button {
+    background-color: var(--primary-color);
+}
+
+.graphql-playground-view #graphiql .graphiql-sessions .graphiql-editors .graphiql-toolbar .graphiql-toolbar-icon {
+  color: var(--primary-color);
+}
+
+/* =============================================== */
+/*   overrides for graphql-playground history      */
+/* =============================================== */
+
+.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item-action {
+    color: var(--primary-color);
+}
+
+.graphql-playground-view #graphiql .graphiql-history .graphiql-history-header {
+    color: var(--base-text-color);
+}
+
+.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item-label {
+    color: var(--text-muted-color);
+}
+
+.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item.editable {
+    background-color: #fff;
+}
+
+.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item.editable input {
+    border: 1px solid hsla(var(--secondary-color-hsl), 0.5);
+}
+
+.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item.editable button {
+    color: var(--primary-color);
+}
+
+.graphql-playground-view #graphiql .graphiql-history .graphiql-history-item.editable button:nth-of-type(2) {
+    /* using the color for .btn-link.secondary */
+    color: rgba(0, 0, 0, .66);
+}
+
+/* =============================================== */
+/*   overrides for graphql documentation explorer  */
+/* =============================================== */
+
+.graphql-playground-view #graphiql .graphiql-doc-explorer .graphiql-doc-explorer-header {
+    color: var(--base-text-color);
+}
+
+/* =============================================== */
+/*   overrides for graphiql explorer               */
+/* =============================================== */
+
+.graphql-playground-view #graphiql .docExplorerWrap .doc-explorer-title {
+    color: var(--base-text-color);
+}
+
+/* =============================================== */
+/*   overrides for codemirror                      */
+/* =============================================== */
+
+.graphql-playground-view #graphiql li.CodeMirror-hint-active {
+    background: var(--autocomplete-background);
+    color: inherit;
+}
+
+/* ================================================ */
+/*   overrides for graphiql dialog (hotkeys dialog) */
+/* ================================================ */
+
+.graphiql-dialog {
+    border-radius: 0;
+    color: var(--base-text-color);
+}
+
+.graphiql-dialog,
+.graphiql-dialog-overlay {
+    z-index: 1010;
+}

package/dist/css/graphql/import-endpoint-definition-modal.css

@@ -0,0 +1,73 @@
+.import-endpoint-definition-modal .import-endpoint-definition-modal-body {
+    border: 1px solid #e5e5e5;
+}
+
+.import-endpoint-definition-modal .toolbar button i {
+    margin-right: .5em;
+}
+
+.import-endpoint-definition-modal .upload-area {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: stretch;
+    padding: 20px;
+    text-align: center;
+}
+
+.import-endpoint-definition-modal .upload-area.dragover {
+    outline: 3px dashed #ccc;
+}
+
+.import-endpoint-definition-modal .file-list {
+    margin-bottom: 0;
+}
+
+.import-endpoint-definition-modal .file-list td {
+    border: none;
+    text-align: left;
+}
+
+.import-endpoint-definition-modal .file-item td {
+    padding-top: .6rem;
+    padding-bottom: .6rem;
+}
+
+.import-endpoint-definition-modal .file-item.sub-file td {
+    padding-top: .3rem;
+    padding-bottom: .3rem;
+}
+
+.import-endpoint-definition-modal .file-list .file-info {
+    width: 60%;
+}
+
+.import-endpoint-definition-modal .file-list .import-status {
+    width: 8%;
+}
+
+.import-endpoint-definition-modal .file-list .file-actions {
+    width: 5%;
+}
+
+.import-endpoint-definition-modal .file-list .report-link {
+    /* reset the padding coming from btn-link */
+    padding: 0;
+}
+
+.import-endpoint-definition-modal .file-list .endpoint-link {
+    text-decoration: underline;
+}
+
+.import-endpoint-definition-modal .file-list .sub-file-indent {
+    margin-left: 20px;
+    color: #666;
+    font-family: monospace;
+}
+
+.import-endpoint-definition-modal .progress-bar-danger {
+    background-color: var(--color-danger-light);
+}
+