added support for (imported) label on entities that are imported from…

… external sources. Fixes #1047
Apicurio · Jan 28, 2020 · 1a845a1 · 1a845a1
1 parent 63f48be
commit 1a845a1
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 28 deletions.
diff --git a/back-end/hub-api/src/main/java/io/apicurio/hub/api/content/AbstractReferenceResolver.java b/back-end/hub-api/src/main/java/io/apicurio/hub/api/content/AbstractReferenceResolver.java
@@ -97,15 +97,18 @@ protected Node resolveUriRef(URI referenceUri, Node from) throws IOException {
     }
 
     /**
+     * Fetch the content at the given URI using some sort of implementation-specific approach.
      * @param referenceUri
      * @throws IOException 
      * @throws MalformedURLException 
      */
     protected abstract String fetchUriContent(URI referenceUri) throws IOException;
 
     /**
-     * TODO add javadoc 
-     * TODO also support YAML!
+     * Parse the given external content.  The content may be JSON or YAML.  This method should 
+     * figure out which (or simply try both).
+     * 
+     * TODO support YAML
      * 
      * @param externalContent
      * @throws JsonProcessingException 

diff --git a/.../studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition-item.component.css b/.../studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition-item.component.css
@@ -0,0 +1,22 @@
+span.icon {
+    line-height: 21px;
+}
+span.name {
+    flex-grow: 2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+span.imported {
+    font-size: 11px;
+    border-radius: 2px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+.validation-aggregate {
+}
+
+.collaborator-aggregate {
+}
diff --git a/...studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition-item.component.html b/...studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition-item.component.html
@@ -1,4 +1,5 @@
-<span class="fa fa-fw fa-code"></span>
-<span>{{ definitionName() }}</span>
+<span class="icon fa fa-fw fa-code"></span>
+<span class="name">{{ definitionName() }}</span>
+<span class="imported label label-info" *ngIf="isImported()">Imported</span>
 <collaborator-aggregate [nodePath]="asNodePath()"></collaborator-aggregate>
 <validation-aggregate [models]="[schema]"></validation-aggregate>
diff --git a/...d/studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition-item.component.ts b/...d/studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition-item.component.ts
@@ -27,6 +27,7 @@ import {ModelUtils} from "../../_util/model.util";
     moduleId: module.id,
     selector: "[definition-item]",
     templateUrl: "definition-item.component.html",
+    styleUrls: [ "definition-item.component.css" ],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -52,4 +53,14 @@ export class DefinitionItemComponent extends AbstractBaseComponent {
     public asNodePath(): string {
         return ModelUtils.nodeToPath(this.schema);
     }
+
+    /**
+     * Returns true iff the schema definition is "imported".  A definition is imported if it has a $ref
+     * that refers to an external source (anything other than #/ references).
+     */
+    isImported(): boolean {
+        let $ref: string = this.schema.$ref;
+        return ($ref && $ref.indexOf("#") != 0);
+    }
+
 }
diff --git a/...nd/studio/src/app/pages/apis/{apiId}/editor/_components/forms/response-item.component.css b/...nd/studio/src/app/pages/apis/{apiId}/editor/_components/forms/response-item.component.css
@@ -0,0 +1,22 @@
+span.icon {
+    line-height: 21px;
+}
+span.name {
+    flex-grow: 2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+span.imported {
+    font-size: 11px;
+    border-radius: 2px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+.validation-aggregate {
+}
+
+.collaborator-aggregate {
+}
diff --git a/...d/studio/src/app/pages/apis/{apiId}/editor/_components/forms/response-item.component.html b/...d/studio/src/app/pages/apis/{apiId}/editor/_components/forms/response-item.component.html
@@ -1,4 +1,5 @@
-<span class="fa fa-fw fa-reply-all"></span>
-<span>{{ responseName() }}</span>
+<span class="icon fa fa-fw fa-reply-all"></span>
+<span class="name">{{ responseName() }}</span>
+<span class="imported label label-info" *ngIf="isImported()">Imported</span>
 <collaborator-aggregate [nodePath]="asNodePath()"></collaborator-aggregate>
 <validation-aggregate [models]="[response]"></validation-aggregate>
diff --git a/...end/studio/src/app/pages/apis/{apiId}/editor/_components/forms/response-item.component.ts b/...end/studio/src/app/pages/apis/{apiId}/editor/_components/forms/response-item.component.ts
@@ -27,6 +27,7 @@ import {ModelUtils} from "../../_util/model.util";
     moduleId: module.id,
     selector: "[response-item]",
     templateUrl: "response-item.component.html",
+    styleUrls: [ "response-item.component.css" ],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -52,4 +53,14 @@ export class ResponseItemComponent extends AbstractBaseComponent {
     public asNodePath(): string {
         return ModelUtils.nodeToPath(this.response);
     }
+
+    /**
+     * Returns true iff the schema definition is "imported".  A definition is imported if it has a $ref
+     * that refers to an external source (anything other than #/ references).
+     */
+    isImported(): boolean {
+        let $ref: string = this.response.$ref;
+        return ($ref && $ref.indexOf("#") != 0);
+    }
+
 }
diff --git a/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/master.component.css b/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/master.component.css
@@ -4,9 +4,3 @@
 .editor-master .editor-outline .master-entity-list:focus {
   outline: none;
 }
-
-.editor-master .editor-outline .section-body .collaborator-aggregate {
-  position: absolute;
-  top: -1px;
-  right: 24px;
-}
diff --git a/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/master.component.html b/front-end/studio/src/app/pages/apis/{apiId}/editor/_components/master.component.html
@@ -102,7 +102,7 @@
                 </signpost>
 
                 <div class="api-path {{ pathClasses(path) }}" *ngFor="let path of paths()">
-                    <div path-item [path]="path.getPath()" (click)="pathList.focus() ; selectPath(path)"
+                    <div class="api-path-item" path-item [path]="path.getPath()" (click)="pathList.focus() ; selectPath(path)"
                          (contextmenu)="showPathContextMenu($event, path)"></div>
                     <collaborator-aggregate [nodePath]="asNodePath(path)"></collaborator-aggregate>
                     <validation-aggregate [models]="[path]" *ngIf="shouldShowValidationAggregate()"></validation-aggregate>

diff --git a/front-end/studio/src/app/pages/apis/{apiId}/editor/editor.component.css b/front-end/studio/src/app/pages/apis/{apiId}/editor/editor.component.css
@@ -61,6 +61,7 @@
   -ms-transition: background-color 200ms;
   -o-transition: background-color 200ms;
   transition: background-color 200ms;
+  display: flex;
 }
 .api-editor .editor-master .editor-outline .api-path:hover {
   background-color: #d1eaf7;
@@ -89,12 +90,24 @@
   border: 1px solid black;
   box-shadow: 0 0 3px #141414;
 }
+
+.api-editor .editor-master .editor-outline .api-path > * {
+  margin-right: 4px;
+}
+.api-editor .editor-master .editor-outline .api-path > .api-path-item {
+  flex-grow: 2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .api-editor .editor-master .editor-outline .api-definition {
   -webkit-transition: background-color 200ms;
   -moz-transition: background-color 200ms;
   -ms-transition: background-color 200ms;
   -o-transition: background-color 200ms;
   transition: background-color 200ms;
+  display: flex;
 }
 .api-editor .editor-master .editor-outline .api-definition:hover {
   background-color: #d1eaf7;
@@ -110,12 +123,18 @@
   background-color: #FFCC87;
   border-left: 2px dotted #E89F3D;
 }
+
+.api-editor .editor-master .editor-outline .api-definition > * {
+  margin-right: 4px;
+}
+
 .api-editor .editor-master .editor-outline .api-response {
   -webkit-transition: background-color 200ms;
   -moz-transition: background-color 200ms;
   -ms-transition: background-color 200ms;
   -o-transition: background-color 200ms;
   transition: background-color 200ms;
+  display: flex;
 }
 .api-editor .editor-master .editor-outline .api-response:hover {
   background-color: #d1eaf7;
@@ -124,6 +143,11 @@
   background-color: #a5d6ef;
   border-left: 2px solid #39a5dc;
 }
+
+.api-editor .editor-master .editor-outline .api-response > * {
+  margin-right: 4px;
+}
+
 .api-editor .editor-detail .detail-title {
   border-bottom: 1px solid #ddd;
 }
@@ -948,21 +972,6 @@
   right: -15px;
   top: -6px;
 }
-.api-editor .editor-master .editor-outline .api-path .validation-aggregate {
-  position: absolute;
-  right: 3px;
-  top: -1px;
-}
-.api-editor .editor-master .editor-outline .api-path .api-operations .validation-aggregate {
-  position: absolute;
-  right: -9px;
-  top: -6px;
-}
-.api-editor .editor-master .editor-outline .api-definition .validation-aggregate {
-  position: absolute;
-  right: 3px;
-  top: -1px;
-}
 .api-editor .detail-content .operations-section .api-operation .type {
   position: relative;
 }