From a43228c4d207b280e76d0b10a1291812c0f19681 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Tue, 20 Dec 2022 10:48:41 +0500
Subject: [PATCH] GH-4298 - Updating link boards modal item (#4362)

* GH-4298 - Updating link boards modal item

* Updating test

* Updating test
---
 .../__snapshots__/boardSelector.test.tsx.snap | 66 +++++++++----------
 .../boardSelectorItem.test.tsx.snap           | 66 +++++++++----------
 .../src/components/boardSelectorItem.scss     |  5 +-
 .../src/components/boardSelectorItem.tsx      |  6 +-
 4 files changed, 72 insertions(+), 71 deletions(-)

diff --git a/mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap b/mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap
index 0d7afa983..0b7fb50e6 100644
--- a/mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap
+++ b/mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap
@@ -289,25 +289,25 @@ exports[`components/boardSelector renders with some results 1`] = `
                 <div
                   class="BoardSelectorItem-info"
                 >
-                  <span
-                    class="icon"
-                  >
-                    <i
-                      class="CompassIcon icon-product-boards"
-                    />
-                  </span>
                   <div
-                    class="resultLine"
+                    class="d-flex"
                   >
+                    <span
+                      class="icon"
+                    >
+                      <i
+                        class="CompassIcon icon-product-boards"
+                      />
+                    </span>
                     <div
                       class="resultTitle"
                     >
                       Untitled board
                     </div>
-                    <div
-                      class="resultDescription"
-                    />
                   </div>
+                  <div
+                    class="resultDescription"
+                  />
                 </div>
                 <div
                   class="linkUnlinkButton"
@@ -328,25 +328,25 @@ exports[`components/boardSelector renders with some results 1`] = `
                 <div
                   class="BoardSelectorItem-info"
                 >
-                  <span
-                    class="icon"
-                  >
-                    <i
-                      class="CompassIcon icon-product-boards"
-                    />
-                  </span>
                   <div
-                    class="resultLine"
+                    class="d-flex"
                   >
+                    <span
+                      class="icon"
+                    >
+                      <i
+                        class="CompassIcon icon-product-boards"
+                      />
+                    </span>
                     <div
                       class="resultTitle"
                     >
                       Untitled board
                     </div>
-                    <div
-                      class="resultDescription"
-                    />
                   </div>
+                  <div
+                    class="resultDescription"
+                  />
                 </div>
                 <div
                   class="linkUnlinkButton"
@@ -367,25 +367,25 @@ exports[`components/boardSelector renders with some results 1`] = `
                 <div
                   class="BoardSelectorItem-info"
                 >
-                  <span
-                    class="icon"
-                  >
-                    <i
-                      class="CompassIcon icon-product-boards"
-                    />
-                  </span>
                   <div
-                    class="resultLine"
+                    class="d-flex"
                   >
+                    <span
+                      class="icon"
+                    >
+                      <i
+                        class="CompassIcon icon-product-boards"
+                      />
+                    </span>
                     <div
                       class="resultTitle"
                     >
                       Untitled board
                     </div>
-                    <div
-                      class="resultDescription"
-                    />
                   </div>
+                  <div
+                    class="resultDescription"
+                  />
                 </div>
                 <div
                   class="linkUnlinkButton"
diff --git a/mattermost-plugin/webapp/src/components/__snapshots__/boardSelectorItem.test.tsx.snap b/mattermost-plugin/webapp/src/components/__snapshots__/boardSelectorItem.test.tsx.snap
index 878929bd4..0f40c42f5 100644
--- a/mattermost-plugin/webapp/src/components/__snapshots__/boardSelectorItem.test.tsx.snap
+++ b/mattermost-plugin/webapp/src/components/__snapshots__/boardSelectorItem.test.tsx.snap
@@ -8,25 +8,25 @@ exports[`components/boardSelectorItem renders board without title 1`] = `
     <div
       class="BoardSelectorItem-info"
     >
-      <span
-        class="icon"
-      >
-        <i
-          class="CompassIcon icon-product-boards"
-        />
-      </span>
       <div
-        class="resultLine"
+        class="d-flex"
       >
+        <span
+          class="icon"
+        >
+          <i
+            class="CompassIcon icon-product-boards"
+          />
+        </span>
         <div
           class="resultTitle"
         >
           Untitled board
         </div>
-        <div
-          class="resultDescription"
-        />
       </div>
+      <div
+        class="resultDescription"
+      />
     </div>
     <div
       class="linkUnlinkButton"
@@ -52,25 +52,25 @@ exports[`components/boardSelectorItem renders linked board 1`] = `
     <div
       class="BoardSelectorItem-info"
     >
-      <span
-        class="icon"
-      >
-        <i
-          class="CompassIcon icon-product-boards"
-        />
-      </span>
       <div
-        class="resultLine"
+        class="d-flex"
       >
+        <span
+          class="icon"
+        >
+          <i
+            class="CompassIcon icon-product-boards"
+          />
+        </span>
         <div
           class="resultTitle"
         >
           Test title
         </div>
-        <div
-          class="resultDescription"
-        />
       </div>
+      <div
+        class="resultDescription"
+      />
     </div>
     <div
       class="linkUnlinkButton"
@@ -96,25 +96,25 @@ exports[`components/boardSelectorItem renders not linked board 1`] = `
     <div
       class="BoardSelectorItem-info"
     >
-      <span
-        class="icon"
-      >
-        <i
-          class="CompassIcon icon-product-boards"
-        />
-      </span>
       <div
-        class="resultLine"
+        class="d-flex"
       >
+        <span
+          class="icon"
+        >
+          <i
+            class="CompassIcon icon-product-boards"
+          />
+        </span>
         <div
           class="resultTitle"
         >
           Test title
         </div>
-        <div
-          class="resultDescription"
-        />
       </div>
+      <div
+        class="resultDescription"
+      />
     </div>
     <div
       class="linkUnlinkButton"
diff --git a/mattermost-plugin/webapp/src/components/boardSelectorItem.scss b/mattermost-plugin/webapp/src/components/boardSelectorItem.scss
index ecdf44892..767c8c289 100644
--- a/mattermost-plugin/webapp/src/components/boardSelectorItem.scss
+++ b/mattermost-plugin/webapp/src/components/boardSelectorItem.scss
@@ -1,12 +1,12 @@
 .BoardSelectorItem {
     display: flex;
+    align-items: center;
     overflow: hidden;
     flex-direction: row;
     padding: 10px 0;
     margin: 0 35px;
 
     .BoardSelectorItem-info {
-        display: flex;
         flex: 1;
         overflow: hidden;
     }
@@ -42,7 +42,8 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        opacity: 0.7;
+        padding-left: 28px;
+        opacity: 0.64;
     }
 
     .linkUnlinkButton {
diff --git a/mattermost-plugin/webapp/src/components/boardSelectorItem.tsx b/mattermost-plugin/webapp/src/components/boardSelectorItem.tsx
index 3eff5bb94..15b26b3d1 100644
--- a/mattermost-plugin/webapp/src/components/boardSelectorItem.tsx
+++ b/mattermost-plugin/webapp/src/components/boardSelectorItem.tsx
@@ -25,11 +25,11 @@ const BoardSelectorItem = (props: Props) => {
     return (
         <div className='BoardSelectorItem'>
             <div className='BoardSelectorItem-info'>
-                <span className='icon'>{item.icon || <CompassIcon icon='product-boards'/>}</span>
-                <div className='resultLine'>
+                <div className='d-flex'>
+                    <span className='icon'>{item.icon || <CompassIcon icon='product-boards'/>}</span>
                     <div className='resultTitle'>{resultTitle}</div>
-                    <div className='resultDescription'>{item.description}</div>
                 </div>
+                <div className='resultDescription'>{item.description}</div>
             </div>
             <div className='linkUnlinkButton'>
                 {item.channelId === currentChannel &&