From 952ae47d559460d267d8fa6dacf1ff8d2b9d98aa Mon Sep 17 00:00:00 2001
From: Abbie Sims <74302970+abbiesims@users.noreply.github.com>
Date: Tue, 23 Apr 2024 15:27:35 +0400
Subject: [PATCH] Modify integrations tab (#1803)

Places endpoint above interface, removes tooltip and adds a short description
---
 .../integrations/components/InterfaceItem.tsx | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/static/js/src/public/details/integrations/components/InterfaceItem.tsx b/static/js/src/public/details/integrations/components/InterfaceItem.tsx
index 60d4cba39..a0bb8ec0b 100644
--- a/static/js/src/public/details/integrations/components/InterfaceItem.tsx
+++ b/static/js/src/public/details/integrations/components/InterfaceItem.tsx
@@ -131,33 +131,35 @@ export const InterfaceItem = ({
     <>
       <hr />
       <h3 className="p-heading--4 u-no-margin--bottom" id={interfaceData.key}>
-        {interfaceData.key} |{" "}
-        <a href={`/interfaces/${interfaceData.interface}`}>
-          {interfaceData.interface}
-        </a>{" "}
-        <span
-          className="p-tooltip--right"
-          aria-describedby={`${interfaceData.key}-${interfaceData.interface}-tooltip`}
-        >
-          <Icon name="information" />
-          <span
-            className="p-tooltip__message"
-            role="tooltip"
-            id={`${interfaceData.key}-${interfaceData.interface}-tooltip`}
-          >
-            Relation | Interface
-          </span>
-        </span>
+        <div>
+          {interfaceData.key}
+          <span className="u-text--muted"> endpoint</span>
+        </div>
+        <div>
+          <a href={`/interfaces/${interfaceData.interface}`}>
+            {interfaceData.interface}
+          </a>
+          <span className="u-text--muted"> interface </span>
+        </div>
       </h3>
       {interfaceData.description && <p>{interfaceData.description}</p>}
 
       {charms && charms?.length > 0 && (
         <>
-          <p>
-            Charms that{" "}
-            <b>{interfaceType === "requires" ? "provide" : "consume"}</b>{" "}
-            {interfaceData.interface}
-          </p>
+          <div style={{ paddingTop: "0.5rem" }}>
+            <p className="u-fixed-width u-no-margin--bottom">
+              The <b>{interfaceData.key}</b> endpoint
+              <b>{interfaceType === "requires" ? " provides " : " requires "}</b> 
+              an integration over the {" "}
+              <a href={`/interfaces/${interfaceData.interface}`}>
+                {interfaceData.interface}
+              </a> 
+              {" "} interface
+            </p>
+            <p>
+              This means it can integrate with:
+            </p>
+          </div>
           <Row>
             {charms.map((charm: ICharm) => (
               <Col