Display new attributes parameters in the schema viewer - IFC-1527 (#6510)

* add styled title

* add parameters in the schema viewer

* update test

* fix attribute display and update test

Author: pa-lem

frontend/app/src/entities/schema/ui/attribute-display.tsx

@@ -1,7 +1,7 @@
 import { components } from "@/shared/api/rest/types.generated";
 import Accordion from "@/shared/components/display/accordion";
 import { ComputedAttributeDisplay } from "./computed-attribute-display";
-import { AccordionStyled, NullDisplay, PropertyRow } from "./styled";
+import { AccordionStyled, NullDisplay, PropertyRow, PropertyTitle } from "./styled";
 
 export const AttributeDisplay = ({
   attribute,
@@ -29,6 +29,7 @@ export const AttributeDisplay = ({
         <PropertyRow title="Label" value={attribute.label} />
         <PropertyRow title="Description" value={attribute.description} />
         <PropertyRow title="Inherited" value={attribute.inherited} />
+        <PropertyRow title="Default value" value={attribute.default_value as any} />
       </div>
 
       <div>
@@ -38,16 +39,12 @@ export const AttributeDisplay = ({
         <PropertyRow title="Enum" value={attribute.enum as string[]} />
       </div>
 
-      <div>
-        <PropertyRow title="Default value" value={attribute.default_value as any} />
-        <PropertyRow title="Max length" value={attribute.max_length} />
-        <PropertyRow title="Min length" value={attribute.min_length} />
-        <PropertyRow title="Regex" value={attribute.regex} />
-      </div>
       <div>
         <PropertyRow title="Branch" value={attribute.branch} />
         <PropertyRow title="Order weight" value={attribute.order_weight} />
       </div>
+
+      <AttributeParameters attribute={attribute} />
     </AccordionStyled>
   );
 };
@@ -86,3 +83,23 @@ const ChoicesRow = ({
     </div>
   );
 };
+
+const AttributeParameters = ({
+  attribute,
+}: { attribute: components["schemas"]["AttributeSchema-Output"] }) => {
+  if (attribute.kind === "Text") {
+    return (
+      <div>
+        <PropertyTitle title="Parameters" />
+
+        <div className="pl-4">
+          <PropertyRow title="Regex" value={attribute.parameters?.regex} />
+          <PropertyRow title="Min length" value={attribute.parameters?.min_length} />
+          <PropertyRow title="Max length" value={attribute.parameters?.max_length} />
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+};

frontend/app/src/entities/schema/ui/schema-viewer.test.tsx

@@ -36,6 +36,11 @@ describe("Schema Visualizer Component", () => {
             kind: "Jinja2",
             jinja2_template: "test",
           },
+          parameters: {
+            regex: "test-regex",
+            min_length: 1,
+            max_length: 10,
+          },
         },
       ],
     });
@@ -49,6 +54,9 @@ describe("Schema Visualizer Component", () => {
     // THEN
     await expect.element(component.getByText("random-id")).toBeVisible();
     await expect.element(component.getByText("CoreTransformJinja2")).toBeVisible();
+    await expect.element(component.getByText("test-regex")).toBeVisible();
+    await expect.element(component.getByText("Min length1")).toBeVisible();
+    await expect.element(component.getByText("Max length10")).toBeVisible();
   });
 
   test("renders jinja template correctly", async () => {
@@ -63,6 +71,7 @@ describe("Schema Visualizer Component", () => {
           kind: "Text",
           optional: false,
           read_only: false,
+          parameters: {},
           computed_attribute: {
             kind: "Jinja2",
             jinja2_template: "{{ name__value | upper }}",
@@ -95,6 +104,7 @@ describe("Schema Visualizer Component", () => {
           kind: "Text",
           optional: false,
           read_only: false,
+          parameters: {},
           computed_attribute: {
             kind: "TransformPython",
             transform: "test-transform",

frontend/app/src/entities/schema/ui/styled.tsx

@@ -107,6 +107,18 @@ export const PropertyRow = ({
   );
 };
 
+export const PropertyTitle = ({
+  title,
+}: {
+  title: string;
+}) => {
+  return (
+    <dl className="flex justify-between items-start gap-4 text-sm font-semibold p-2 py-3">
+      <dt>{title}</dt>
+    </dl>
+  );
+};
+
 export const TabStyled = ({ className, ...props }: TabProps) => (
   <Tab
     className={({ isSelected }) =>