From b5d4864bb9a237b94d56540c4ddcb6e6027ab59a Mon Sep 17 00:00:00 2001
From: Timon Back <timonback@users.noreply.github.com>
Date: Sat, 10 Aug 2024 23:01:03 +0200
Subject: [PATCH] feat(ui): show used by in schema

Adds the link back to the channel operation or schema - when navigating by clicks
---
 .../new/schema/schema.component.css           |  1 +
 .../new/schema/schema.component.html          |  3 +-
 .../new/schemas/schemas.component.html        | 25 +++++++-
 .../range/schema-range.component.spec.ts      |  9 +++
 springwolf-ui/src/app/models/channel.model.ts |  1 +
 springwolf-ui/src/app/models/schema.model.ts  |  1 +
 .../asyncapi/asyncapi-mapper.service.ts       | 61 ++++++++++++++++---
 .../src/app/service/mock/init-values.ts       |  1 +
 8 files changed, 89 insertions(+), 13 deletions(-)

diff --git a/springwolf-ui/src/app/components/new/schema/schema.component.css b/springwolf-ui/src/app/components/new/schema/schema.component.css
index 964ca0132..2a7bad02a 100644
--- a/springwolf-ui/src/app/components/new/schema/schema.component.css
+++ b/springwolf-ui/src/app/components/new/schema/schema.component.css
@@ -9,6 +9,7 @@
 
 .description {
   overflow: auto;
+  margin-bottom: -1em;
 }
 
 .example {
diff --git a/springwolf-ui/src/app/components/new/schema/schema.component.html b/springwolf-ui/src/app/components/new/schema/schema.component.html
index 45b7b26fc..340a48f00 100644
--- a/springwolf-ui/src/app/components/new/schema/schema.component.html
+++ b/springwolf-ui/src/app/components/new/schema/schema.component.html
@@ -9,7 +9,6 @@
   </ng-container>
 
   <!--  Objects  -->
-  <b *ngIf="Object.keys(schema().properties || {}).length > 0">Properties</b>
   <mat-list *ngIf="Object.keys(schema().properties || {}).length > 0">
     <mat-list-item
       *ngFor="let property of schema().properties || {} | keyvalue"
@@ -74,7 +73,7 @@
     {{ value.items.type }}[]
   </span>
 
-  <div class="description">
+  <div class="description" *ngIf="value.description?.length > 0">
     <markdown [data]="value.description"></markdown>
   </div>
 
diff --git a/springwolf-ui/src/app/components/new/schemas/schemas.component.html b/springwolf-ui/src/app/components/new/schemas/schemas.component.html
index 0541ab894..385ac53ea 100644
--- a/springwolf-ui/src/app/components/new/schemas/schemas.component.html
+++ b/springwolf-ui/src/app/components/new/schemas/schemas.component.html
@@ -12,7 +12,7 @@ <h2>Schemas</h2>
       <div class="table margin-vertical-1em">
         <div class="table-row">
           <span>Name</span>
-          <span>{{ schema.name }}</span>
+          <span class="text-console">{{ schema.name }}</span>
         </div>
         <div class="table-row">
           <span>Type</span>
@@ -24,9 +24,30 @@ <h2>Schemas</h2>
           <span>Description</span>
           <markdown [data]="schema.description"></markdown>
         </div>
+        <div class="table-row" *ngIf="schema.usedBy.length > 0">
+          <span>Used by</span>
+          <mat-chip-set>
+            @for (usageEl of schema.usedBy; track usageEl) {
+            <a [href]="usageEl.anchorUrl">
+              <mat-chip>
+                <mat-icon matChipAvatar>{{
+                  usageEl.type == "schema" ? "schema" : "swap_vert"
+                }}</mat-icon>
+                {{ usageEl.name }}
+              </mat-chip></a
+            >
+            }
+          </mat-chip-set>
+        </div>
+      </div>
+
+      <h6>Example</h6>
+      <div>
+        <app-json [data]="schema.example?.rawValue"></app-json>
       </div>
 
-      <app-schema [schema]="schema"></app-schema>
+      <h6>Properties</h6>
+      <app-schema-new [schema]="schema"></app-schema-new>
     </mat-card-content>
   </mat-card>
   @if (!$last) {
diff --git a/springwolf-ui/src/app/components/schemas/range/schema-range.component.spec.ts b/springwolf-ui/src/app/components/schemas/range/schema-range.component.spec.ts
index 7ff60443c..d55aa945f 100644
--- a/springwolf-ui/src/app/components/schemas/range/schema-range.component.spec.ts
+++ b/springwolf-ui/src/app/components/schemas/range/schema-range.component.spec.ts
@@ -17,6 +17,7 @@ describe("SchemaRangeComponent", function () {
       title: "test",
       name: "test",
       anchorIdentifier: "test",
+      usedBy: [],
       minimum: 0.1,
       maximum: 10,
       exclusiveMinimum: true,
@@ -31,6 +32,7 @@ describe("SchemaRangeComponent", function () {
       title: "test",
       name: "test",
       anchorIdentifier: "test",
+      usedBy: [],
       minimum: 0.1,
       maximum: 10,
       exclusiveMinimum: true,
@@ -45,6 +47,7 @@ describe("SchemaRangeComponent", function () {
       title: "test",
       name: "test",
       anchorIdentifier: "test",
+      usedBy: [],
       minimum: 0.1,
       maximum: 10,
       exclusiveMinimum: false,
@@ -59,6 +62,7 @@ describe("SchemaRangeComponent", function () {
       title: "test",
       name: "test",
       anchorIdentifier: "test",
+      usedBy: [],
       minimum: 0.1,
       maximum: 10,
       exclusiveMinimum: true,
@@ -73,6 +77,7 @@ describe("SchemaRangeComponent", function () {
       title: "test",
       name: "test",
       anchorIdentifier: "test",
+      usedBy: [],
       minimum: 0.1,
       maximum: 10,
     });
@@ -85,6 +90,7 @@ describe("SchemaRangeComponent", function () {
       title: "test",
       name: "test",
       anchorIdentifier: "test",
+      usedBy: [],
       minimum: 0.1,
       exclusiveMinimum: true,
     });
@@ -97,6 +103,7 @@ describe("SchemaRangeComponent", function () {
       title: "test",
       name: "test",
       anchorIdentifier: "test",
+      usedBy: [],
       maximum: 10,
       exclusiveMaximum: true,
     });
@@ -109,6 +116,7 @@ describe("SchemaRangeComponent", function () {
       title: "test",
       name: "test",
       anchorIdentifier: "test",
+      usedBy: [],
       minimum: 0.1,
     });
 
@@ -120,6 +128,7 @@ describe("SchemaRangeComponent", function () {
       title: "test",
       name: "test",
       anchorIdentifier: "test",
+      usedBy: [],
       maximum: 10,
     });
 
diff --git a/springwolf-ui/src/app/models/channel.model.ts b/springwolf-ui/src/app/models/channel.model.ts
index de34c9a28..82041f2b3 100644
--- a/springwolf-ui/src/app/models/channel.model.ts
+++ b/springwolf-ui/src/app/models/channel.model.ts
@@ -6,6 +6,7 @@ export const CHANNEL_ANCHOR_PREFIX = "channel-";
 export interface ChannelOperation {
   name: string;
   anchorIdentifier: string;
+  anchorUrl: string;
   description?: string;
   operation: Operation;
   bindings: Bindings;
diff --git a/springwolf-ui/src/app/models/schema.model.ts b/springwolf-ui/src/app/models/schema.model.ts
index e75041073..34cc5793c 100644
--- a/springwolf-ui/src/app/models/schema.model.ts
+++ b/springwolf-ui/src/app/models/schema.model.ts
@@ -11,6 +11,7 @@ export interface Schema {
    */
   title: string;
   anchorIdentifier: string;
+  usedBy: { name: string; anchorUrl: string; type: "channel" | "schema" }[];
   description?: string;
   deprecated?: boolean;
 
diff --git a/springwolf-ui/src/app/service/asyncapi/asyncapi-mapper.service.ts b/springwolf-ui/src/app/service/asyncapi/asyncapi-mapper.service.ts
index a151cfe32..490c26677 100644
--- a/springwolf-ui/src/app/service/asyncapi/asyncapi-mapper.service.ts
+++ b/springwolf-ui/src/app/service/asyncapi/asyncapi-mapper.service.ts
@@ -50,7 +50,7 @@ export class AsyncApiMapperService {
         item.servers,
         item.defaultContentType
       );
-      return {
+      const asyncApi = {
         info: this.mapInfo(item),
         servers: this.mapServers(item.servers),
         channels: channels,
@@ -59,6 +59,8 @@ export class AsyncApiMapperService {
           schemas: this.mapSchemas(item.components.schemas),
         },
       };
+      this.postProcess(asyncApi);
+      return asyncApi;
     } catch (e: any) {
       this.notificationService.showError(
         "Error parsing AsyncAPI: " + e?.message
@@ -223,16 +225,18 @@ export class AsyncApiMapperService {
       operation.reply
     );
 
+    const anchorIdentifier =
+      CHANNEL_ANCHOR_PREFIX +
+      [
+        mappedOperation.protocol,
+        channelName,
+        mappedOperation.operationType,
+        mappedOperation.message.title,
+      ].join("-");
     return {
       name: channelName,
-      anchorIdentifier:
-        CHANNEL_ANCHOR_PREFIX +
-        [
-          mappedOperation.protocol,
-          channelName,
-          mappedOperation.operationType,
-          mappedOperation.message.title,
-        ].join("-"),
+      anchorIdentifier: anchorIdentifier,
+      anchorUrl: AsyncApiMapperService.BASE_URL + anchorIdentifier,
       description: channel.description,
       operation: mappedOperation,
       bindings: channel.bindings || {},
@@ -444,6 +448,7 @@ export class AsyncApiMapperService {
     return {
       name: schemaName,
       title: schemaName.split(".")?.pop() || "undefined-title",
+      usedBy: [],
       anchorIdentifier: schemaName,
       description: schema.description,
       deprecated: schema.deprecated,
@@ -514,6 +519,7 @@ export class AsyncApiMapperService {
     return {
       name: schemaName,
       title: schemaName.split(".").pop()!!,
+      usedBy: [],
       anchorIdentifier: schemaName,
 
       // type == ref
@@ -538,6 +544,43 @@ export class AsyncApiMapperService {
     }
   }
 
+  private postProcess(asyncApi: AsyncApi) {
+    asyncApi.components.schemas.forEach((schema) => {
+      asyncApi.channels.forEach((channel) => {
+        channel.operations.forEach((channelOperation) => {
+          if (
+            channelOperation.operation.message.payload.title === schema.name
+          ) {
+            schema.usedBy.push({
+              name: channelOperation.name,
+              anchorUrl: channelOperation.anchorUrl!!,
+              type: "channel",
+            });
+          }
+        });
+      });
+
+      asyncApi.components.schemas.forEach((otherSchema) => {
+        Object.values(otherSchema?.properties || {}).forEach((property) => {
+          if (property.refTitle === schema.name) {
+            schema.usedBy.push({
+              name: otherSchema.title,
+              anchorUrl: otherSchema.anchorUrl!!,
+              type: "schema",
+            });
+          }
+        });
+        if (otherSchema.items?.refTitle === schema.name) {
+          schema.usedBy.push({
+            name: otherSchema.title,
+            anchorUrl: otherSchema.anchorUrl!!,
+            type: "schema",
+          });
+        }
+      });
+    });
+  }
+
   private parsingErrorBoundary<T>(path: string, f: () => T): T | undefined {
     return catchException(f, (e) => {
       this.notificationService.showError(
diff --git a/springwolf-ui/src/app/service/mock/init-values.ts b/springwolf-ui/src/app/service/mock/init-values.ts
index e5bd12e12..08e498ae3 100644
--- a/springwolf-ui/src/app/service/mock/init-values.ts
+++ b/springwolf-ui/src/app/service/mock/init-values.ts
@@ -41,4 +41,5 @@ export const initSchema: Schema = {
   title: "",
   name: "",
   anchorIdentifier: "",
+  usedBy: [],
 };