Display on_delete of relationships definition in the Schema Visualizer (#7435)

Author: bilalabbad

changelog/7431.added.md

@@ -0,0 +1,2 @@
+- Schema Visualizer now displays `on_delete` settings for relationships
+- Fixed display of common_parent settings in relationships.

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

@@ -4,13 +4,11 @@ import { components } from "@/shared/api/rest/types.generated";
 import { Badge } from "@/shared/components/ui/badge";
 import { warnUnexpectedType } from "@/shared/utils/common";
 
-import { AccordionStyled, ListDisplay, ModelDisplay, PropertyRow } from "./styled";
+import { RelationshipSchema } from "@/entities/schema/types";
 
-export const RelationshipDisplay = ({
-  relationship,
-}: {
-  relationship: components["schemas"]["RelationshipSchema-Output"];
-}) => {
+import { AccordionStyled, ModelDisplay, PropertyRow } from "./styled";
+
+export const RelationshipDisplay = ({ relationship }: { relationship: RelationshipSchema }) => {
   const cardinalityLabel = relationship.cardinality
     ? getLabelForCardinality(relationship.cardinality)
     : null;
@@ -44,15 +42,13 @@ export const RelationshipDisplay = ({
       <div>
         <PropertyRow title="Peer" value={<ModelDisplay kinds={[relationship.peer]} />} />
         <PropertyRow title="Peer identifier" value={relationship.identifier} />
-        <PropertyRow
-          title="Common parent"
-          value={<ListDisplay items={relationship.common_parent} />}
-        />
+        <PropertyRow title="Common parent" value={relationship.common_parent} />
         <PropertyRow title="Cardinality" value={relationship.cardinality} />
         <PropertyRow title="Direction" value={relationship.direction} />
         <PropertyRow title="Kind" value={relationship.kind} />
         <PropertyRow title="Hierarchical" value={relationship.hierarchical} />
         <PropertyRow title="Inherited" value={relationship.inherited} />
+        <PropertyRow title="On delete" value={relationship.on_delete} />
       </div>
 
       <div>

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

@@ -75,7 +75,7 @@ export const PropertyRow = ({
       case "number":
         return value;
       case "boolean":
-        return <Badge variant={value ? "green-outline" : "red-outline"}>{value.toString()}</Badge>;
+        return <Badge variant={value ? "green" : "red"}>{value.toString()}</Badge>;
       case "object":
         if (Array.isArray(value)) {
           return (