add common relatives property in schema viewer (#6564)

Author: pa-lem

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

@@ -2,7 +2,7 @@ import { components } from "@/shared/api/rest/types.generated";
 import { Badge } from "@/shared/components/ui/badge";
 import { warnUnexpectedType } from "@/shared/utils/common";
 import { Icon } from "@iconify-icon/react";
-import { AccordionStyled, ModelDisplay, PropertyRow } from "./styled";
+import { AccordionStyled, ListDisplay, ModelDisplay, PropertyRow } from "./styled";
 
 export const RelationshipDisplay = ({
   relationship,
@@ -42,6 +42,10 @@ export const RelationshipDisplay = ({
       <div>
         <PropertyRow title="Peer" value={<ModelDisplay kinds={[relationship.peer]} />} />
         <PropertyRow title="Peer identifier" value={relationship.identifier} />
+        <PropertyRow
+          title="Common relatives"
+          value={<ListDisplay items={relationship.common_relatives} />}
+        />
         <PropertyRow title="Cardinality" value={relationship.cardinality} />
         <PropertyRow title="Direction" value={relationship.direction} />
         <PropertyRow title="Kind" value={relationship.kind} />

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

@@ -168,3 +168,17 @@ export const ModelDisplay = ({ kinds }: { kinds?: string[] }) => {
     </div>
   );
 };
+
+export const ListDisplay = ({ items }: { items?: string[] }) => {
+  return (
+    <div className="space-y-1 flex flex-col items-end">
+      {items?.map((item, index) => {
+        return (
+          <Badge variant={"gray-outline"} key={`${item}_${index}`}>
+            {item}
+          </Badge>
+        );
+      })}
+    </div>
+  );
+};