Feat/schema attributes (#880)

* feat(ui): display schema attributes * feat(ui): improve attribute layout
springwolf · Aug 1, 2024 · 9034919 · 9034919
1 parent a9d974d
commit 9034919
Show file tree

Hide file tree

Showing 14 changed files with 312 additions and 36 deletions.
diff --git a/springwolf-ui/src/app/app.module.ts b/springwolf-ui/src/app/app.module.ts
@@ -38,6 +38,7 @@ import { PrismEditorComponent } from "./components/new/code/prism-editor.compone
 import { SchemaNewComponent } from "./components/new/schema/schema.component";
 import { ServersNewComponent } from "./components/new/servers/servers.component";
 import { SchemasNewComponent } from "./components/new/schemas/schemas.component";
+import { RangeNewComponent } from "./components/new/schema/range/range.component";
 
 @NgModule({
   imports: [],
@@ -64,6 +65,7 @@ export const declarations = [
   ChannelOperationComponent,
   SchemasNewComponent,
   SchemaNewComponent,
+  RangeNewComponent,
 ];
 export const imports = [
   DirectivesModule,

diff --git a/springwolf-ui/src/app/components/new/schema/range/range.component.html b/springwolf-ui/src/app/components/new/schema/range/range.component.html
@@ -0,0 +1,14 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<span>
+  <span *ngIf="lowerBound() != undefined && upperBound() == undefined">
+    {{ lowerBoundInclusive() ? ">=" : ">" }} {{ lowerBound() }}
+  </span>
+  <span *ngIf="lowerBound() == undefined && upperBound() != undefined">
+    {{ upperBoundInclusive() ? "<=" : "<" }} {{ upperBound() }}
+  </span>
+  <span *ngIf="lowerBound() != undefined && upperBound() != undefined"
+    >{{ lowerBoundInclusive() ? "[" : "(" }} {{ lowerBound() }}
+    ..
+    {{ upperBound() }} {{ upperBoundInclusive() ? "]" : ")" }}
+  </span>
+</span>
diff --git a/springwolf-ui/src/app/components/new/schema/range/range.component.spec.ts b/springwolf-ui/src/app/components/new/schema/range/range.component.spec.ts
@@ -0,0 +1,110 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+import { RangeNewComponent as RangeComponent } from "./range.component";
+import { render, screen } from "@testing-library/angular";
+
+describe("SchemaRangeNewComponent", function () {
+  it("should create the component", async () => {
+    await render(RangeComponent, {
+      componentInputs: {
+        lowerBound: 0.1,
+        upperBound: 10,
+        lowerBoundInclusive: false,
+        upperBoundInclusive: false,
+      },
+    });
+
+    expect(screen).toBeTruthy();
+  });
+
+  it("should have `( 0.1 .. 10 )` as value", async () => {
+    await render(RangeComponent, {
+      componentInputs: {
+        lowerBound: 0.1,
+        upperBound: 10,
+        lowerBoundInclusive: false,
+        upperBoundInclusive: false,
+      },
+    });
+
+    expect(screen.getByText("( 0.1 .. 10 )")).toBeTruthy();
+  });
+
+  it("should have `[ 0.1 .. 10 )` as value", async () => {
+    await render(RangeComponent, {
+      componentInputs: {
+        lowerBound: 0.1,
+        upperBound: 10,
+        lowerBoundInclusive: true,
+        upperBoundInclusive: false,
+      },
+    });
+
+    expect(screen.getByText("[ 0.1 .. 10 )")).toBeTruthy();
+  });
+
+  it("should have `( 0.1 .. 10 ]` as value", async () => {
+    await render(RangeComponent, {
+      componentInputs: {
+        lowerBound: 0.1,
+        upperBound: 10,
+        lowerBoundInclusive: false,
+        upperBoundInclusive: true,
+      },
+    });
+
+    expect(screen.getByText("( 0.1 .. 10 ]")).toBeTruthy();
+  });
+
+  it("should have `[ 0.1 .. 10 ]` as value", async () => {
+    await render(RangeComponent, {
+      componentInputs: {
+        lowerBound: 0.1,
+        upperBound: 10,
+      },
+    });
+
+    expect(screen.getByText("[ 0.1 .. 10 ]")).toBeTruthy();
+  });
+
+  it("should have `> 0.1` as value", async () => {
+    await render(RangeComponent, {
+      componentInputs: {
+        lowerBound: 0.1,
+        lowerBoundInclusive: false,
+      },
+    });
+
+    expect(screen.getByText("> 0.1")).toBeTruthy();
+  });
+
+  it("should have `< 10` as value", async () => {
+    await render(RangeComponent, {
+      componentInputs: {
+        upperBound: 10,
+        upperBoundInclusive: false,
+      },
+    });
+
+    expect(screen.getByText("< 10")).toBeTruthy();
+  });
+
+  it("should have `>= 0.1` as value", async () => {
+    await render(RangeComponent, {
+      componentInputs: {
+        lowerBound: 0.1,
+      },
+    });
+
+    expect(screen.getByText(">= 0.1")).toBeTruthy();
+  });
+
+  it("should have `<= 10` as value", async () => {
+    await render(RangeComponent, {
+      componentInputs: {
+        upperBound: 10,
+      },
+    });
+
+    expect(screen.getByText("<= 10")).toBeTruthy();
+  });
+});
diff --git a/springwolf-ui/src/app/components/new/schema/range/range.component.ts b/springwolf-ui/src/app/components/new/schema/range/range.component.ts
@@ -0,0 +1,17 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+import { Component, input } from "@angular/core";
+
+@Component({
+  selector: "app-schema-range-new",
+  templateUrl: "./range.component.html",
+})
+export class RangeNewComponent {
+  lowerBound = input<number>();
+  upperBound = input<number>();
+  lowerBoundInclusive = input<boolean, boolean | string>(true, {
+    transform: (value: boolean | string) => value === true || value == "true",
+  });
+  upperBoundInclusive = input<boolean, boolean | string>(true, {
+    transform: (value: boolean | string) => value === true || value == "true",
+  });
+}
diff --git a/springwolf-ui/src/app/components/new/schema/schema.component.css b/springwolf-ui/src/app/components/new/schema/schema.component.css
@@ -3,11 +3,22 @@
   color: red;
 }
 
+.deprecated {
+  color: red;
+}
+
 .description {
   overflow: auto;
 }
 
 .example {
-  display: block;
   word-break: break-all;
 }
+
+.attribute {
+  background-color: rgb(128, 90, 213);
+  color: rgb(255, 255, 255);
+  margin: 0 0.2em 0.2em 0;
+  padding: 0.1em 0.2em 0.1em 0.2em;
+  border-radius: 4px;
+}
diff --git a/springwolf-ui/src/app/components/new/schema/schema.component.html b/springwolf-ui/src/app/components/new/schema/schema.component.html
@@ -15,11 +15,14 @@
       *ngFor="let property of schema().properties || {} | keyvalue"
       lines="99"
     >
-      <span class="key text-console" matListItemTitle>
-        <b>{{ property.key }}</b>
+      <span class="key" matListItemTitle>
+        <b class="text-console">{{ property.key }}</b>
         <span class="required" *ngIf="schema().required?.includes(property.key)"
           >*</span
         >
+        <span class="deprecated" *ngIf="property.value.deprecated"
+          >&nbsp;(deprecated)</span
+        >
         &nbsp;
       </span>
       <ng-container
@@ -87,7 +90,64 @@
       </mat-option>
     </mat-select>
   </span>
-  <app-schema-range [schema]="value"> </app-schema-range>
 
-  <hr />
+  <!-- attributes -->
+  <span class="flex flex-wrap">
+    <!-- array attributes -->
+    <span
+      *ngIf="value.minItems != null || value.maxItems != null"
+      class="attribute"
+    >
+      <app-schema-range-new
+        [lowerBound]="value.minItems"
+        [upperBound]="value.maxItems"
+        lowerBoundInclusive="true"
+        upperBoundInclusive="true"
+      />
+      items
+    </span>
+    <span *ngIf="value.uniqueItems != null" class="attribute">
+      Unique items:
+      {{ value.uniqueItems ? "yes" : "no" }}
+    </span>
+
+    <!-- primitive attributes -->
+    <span *ngIf="value.pattern" class="attribute">
+      pattern:
+      <span class="text-console">
+        {{ value.pattern }}
+      </span>
+    </span>
+    <span
+      *ngIf="value.minLength != null || value.maxLength != null"
+      class="attribute"
+    >
+      <app-schema-range-new
+        [lowerBound]="value.minLength"
+        [upperBound]="value.maxLength"
+        lowerBoundInclusive="true"
+        upperBoundInclusive="true"
+      />
+      length
+    </span>
+
+    <span
+      *ngIf="value.minimum != undefined || value.maximum != undefined"
+      class="attribute"
+    >
+      <app-schema-range-new
+        [lowerBound]="value.minimum"
+        [upperBound]="value.maximum"
+        [lowerBoundInclusive]="!value.exclusiveMinimum"
+        [upperBoundInclusive]="!value.exclusiveMaximum"
+      />
+      value range
+    </span>
+    <span *ngIf="value.multipleOf != undefined" class="attribute">
+      Multiple of
+      {{ value.multipleOf }}
+    </span>
+  </span>
+
+  <mat-divider />
 </ng-template>
diff --git a/springwolf-ui/src/app/components/new/schemas/schemas.component.html b/springwolf-ui/src/app/components/new/schemas/schemas.component.html
@@ -11,7 +11,7 @@ <h2>Schemas</h2>
     <mat-card-content>
       <div class="table margin-vertical-1em">
         <div class="table-row">
-          <span>Title</span>
+          <span>Name</span>
           <span>{{ schema.name }}</span>
         </div>
         <div class="table-row">

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
@@ -15,6 +15,8 @@ describe("SchemaRangeComponent", function () {
   it("should create the component", async () => {
     await renderComponent({
       title: "test",
+      name: "test",
+      anchorIdentifier: "test",
       minimum: 0.1,
       maximum: 10,
       exclusiveMinimum: true,
@@ -27,6 +29,8 @@ describe("SchemaRangeComponent", function () {
   it("should have `( 0.1 .. 10 )` as value", async () => {
     await renderComponent({
       title: "test",
+      name: "test",
+      anchorIdentifier: "test",
       minimum: 0.1,
       maximum: 10,
       exclusiveMinimum: true,
@@ -39,6 +43,8 @@ describe("SchemaRangeComponent", function () {
   it("should have `[ 0.1 .. 10 )` as value", async () => {
     await renderComponent({
       title: "test",
+      name: "test",
+      anchorIdentifier: "test",
       minimum: 0.1,
       maximum: 10,
       exclusiveMinimum: false,
@@ -51,6 +57,8 @@ describe("SchemaRangeComponent", function () {
   it("should have `( 0.1 .. 10 ]` as value", async () => {
     await renderComponent({
       title: "test",
+      name: "test",
+      anchorIdentifier: "test",
       minimum: 0.1,
       maximum: 10,
       exclusiveMinimum: true,
@@ -63,6 +71,8 @@ describe("SchemaRangeComponent", function () {
   it("should have `[ 0.1 .. 10 ]` as value", async () => {
     await renderComponent({
       title: "test",
+      name: "test",
+      anchorIdentifier: "test",
       minimum: 0.1,
       maximum: 10,
     });
@@ -73,6 +83,8 @@ describe("SchemaRangeComponent", function () {
   it("should have `> 0.1` as value", async () => {
     await renderComponent({
       title: "test",
+      name: "test",
+      anchorIdentifier: "test",
       minimum: 0.1,
       exclusiveMinimum: true,
     });
@@ -83,6 +95,8 @@ describe("SchemaRangeComponent", function () {
   it("should have `< 10` as value", async () => {
     await renderComponent({
       title: "test",
+      name: "test",
+      anchorIdentifier: "test",
       maximum: 10,
       exclusiveMaximum: true,
     });
@@ -93,6 +107,8 @@ describe("SchemaRangeComponent", function () {
   it("should have `>= 0.1` as value", async () => {
     await renderComponent({
       title: "test",
+      name: "test",
+      anchorIdentifier: "test",
       minimum: 0.1,
     });
 
@@ -102,6 +118,8 @@ describe("SchemaRangeComponent", function () {
   it("should have `<= 10` as value", async () => {
     await renderComponent({
       title: "test",
+      name: "test",
+      anchorIdentifier: "test",
       maximum: 10,
     });
 

diff --git a/springwolf-ui/src/app/components/schemas/schemas.component.html b/springwolf-ui/src/app/components/schemas/schemas.component.html
@@ -20,7 +20,7 @@ <h3>{{ schema.value.title }}</h3>
       </mat-panel-description>
     </mat-expansion-panel-header>
     <h4>
-      Title: <span class="schema-name">{{ schema.value.name }}</span>
+      Name: <span class="schema-name">{{ schema.value.name }}</span>
     </h4>
     <app-schema [schema]="schema.value"></app-schema>
   </mat-expansion-panel>