WD-7613 - Make integrations tables responsive (canonical#1662)

* Make integrations tables responsive. Rename 'relation' to 'integration'.
vladimir-cucu · Nov 28, 2023 · 667d83b · 667d83b
1 parent bdbf382
commit 667d83b
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 18 deletions.
diff --git a/src/pages/ControllersIndex/_controllers.scss b/src/pages/ControllersIndex/_controllers.scss
@@ -4,18 +4,18 @@
 .controllers {
   th,
   td {
-    // Name
+    // Name.
     &:nth-child(1) {
       white-space: nowrap;
       width: 20%;
     }
 
-    // Status
+    // Status.
     &:nth-child(2) {
       width: 15%;
     }
 
-    // Cloud
+    // Cloud.
     &:nth-child(3) {
       width: 15%;
     }

diff --git a/src/pages/EntityDetails/Model/Model.test.tsx b/src/pages/EntityDetails/Model/Model.test.tsx
@@ -162,7 +162,7 @@ describe("Model", () => {
     ).not.toBeInTheDocument();
     expect(
       document.querySelector(
-        ".entity-details__main > .entity-details__relations"
+        ".entity-details__main > .entity-details__integrations"
       )
     ).not.toBeInTheDocument();
     expect(
@@ -202,7 +202,7 @@ describe("Model", () => {
     ).not.toBeInTheDocument();
     expect(
       document.querySelector(
-        ".entity-details__main > .entity-details__relations"
+        ".entity-details__main > .entity-details__integrations"
       )
     ).not.toBeInTheDocument();
     expect(
@@ -242,7 +242,7 @@ describe("Model", () => {
     ).toBeInTheDocument();
     expect(
       document.querySelector(
-        ".entity-details__main > .entity-details__relations"
+        ".entity-details__main > .entity-details__integrations"
       )
     ).not.toBeInTheDocument();
     expect(
@@ -282,7 +282,7 @@ describe("Model", () => {
     ).not.toBeInTheDocument();
     expect(
       document.querySelector(
-        ".entity-details__main > .entity-details__relations"
+        ".entity-details__main > .entity-details__integrations"
       )
     ).toBeInTheDocument();
     expect(
@@ -322,7 +322,7 @@ describe("Model", () => {
     ).not.toBeInTheDocument();
     expect(
       document.querySelector(
-        ".entity-details__main > .entity-details__relations"
+        ".entity-details__main > .entity-details__integrations"
       )
     ).not.toBeInTheDocument();
     expect(

diff --git a/src/pages/EntityDetails/Model/Model.tsx b/src/pages/EntityDetails/Model/Model.tsx
@@ -185,21 +185,21 @@ const Model = () => {
         relationTableRows.length > 0 ? (
           <>
             {shouldShow("relations-title", query.activeView) && (
-              <h5>Relations ({relationTableRows.length})</h5>
+              <h5>Integrations ({relationTableRows.length})</h5>
             )}
             <MainTable
               headers={relationTableHeaders}
               rows={relationTableRows}
-              className="entity-details__relations p-main-table"
+              className="entity-details__integrations p-main-table"
               sortable
-              emptyStateMsg={"There are no relations in this model"}
+              emptyStateMsg="There are no integrations in this model"
             />
             {shouldShow("relations-title", query.activeView) && (
               <>
                 {consumedTableRows.length > 0 ||
                   (offersTableRows.length > 0 && (
                     <h5>
-                      Cross-model relations (
+                      Cross-model integrations (
                       {consumedTableRows.length + offersTableRows.length})
                     </h5>
                   ))}
@@ -210,19 +210,19 @@ const Model = () => {
                 data-testid={TestId.CONSUMED}
                 headers={consumedTableHeaders}
                 rows={consumedTableRows}
-                className="entity-details__relations p-main-table"
+                className="p-main-table"
                 sortable
-                emptyStateMsg={"There are no remote relations in this model"}
+                emptyStateMsg="There are no remote integrations in this model"
               />
             )}
             {offersTableRows.length > 0 && (
               <MainTable
                 data-testid={TestId.OFFERS}
                 headers={offersTableHeaders}
                 rows={offersTableRows}
-                className="entity-details__relations p-main-table"
+                className="p-main-table"
                 sortable
-                emptyStateMsg={"There are no connected offers in this model"}
+                emptyStateMsg="There are no connected offers in this model"
               />
             )}
           </>

diff --git a/src/pages/EntityDetails/_entity-details.scss b/src/pages/EntityDetails/_entity-details.scss
@@ -336,8 +336,31 @@
     }
   }
 
-  .entity-details__machines,
-  .entity-details__relations {
+  .entity-details__integrations {
+    th,
+    td {
+      // Type.
+      &:nth-child(4) {
+        width: 15%;
+      }
+
+      @include mobile-and-medium {
+        // Type.
+        &:nth-child(4) {
+          display: none;
+        }
+      }
+
+      @include mobile {
+        // Requirer.
+        &:nth-child(2) {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .entity-details__machines {
     th,
     td {
       &:nth-child(1) {