From f8bcaed3ad04d65322b5bb24c822e79a307b883f Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 19 Dec 2022 19:40:04 +0100
Subject: [PATCH] Moved short URL status to the last column in the table

---
 src/short-urls/ShortUrlsTable.tsx         |  3 +--
 src/short-urls/helpers/ShortUrlStatus.tsx | 11 +++++------
 src/short-urls/helpers/ShortUrlsRow.tsx   |  6 +++---
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/short-urls/ShortUrlsTable.tsx b/src/short-urls/ShortUrlsTable.tsx
index a1018e95..4448af12 100644
--- a/src/short-urls/ShortUrlsTable.tsx
+++ b/src/short-urls/ShortUrlsTable.tsx
@@ -65,7 +65,6 @@ export const ShortUrlsTable = (ShortUrlsRow: ShortUrlsRowType) => ({
           <th className={orderableColumnsClasses} onClick={orderByColumn?.('dateCreated')}>
             Created at {renderOrderIcon?.('dateCreated')}
           </th>
-          <th className="short-urls-table__header-cell" />
           <th className={orderableColumnsClasses} onClick={orderByColumn?.('shortCode')}>
             Short URL {renderOrderIcon?.('shortCode')}
           </th>
@@ -82,7 +81,7 @@ export const ShortUrlsTable = (ShortUrlsRow: ShortUrlsRowType) => ({
           <th className={orderableColumnsClasses} onClick={orderByColumn?.('visits')}>
             <span className="indivisible">Visits {renderOrderIcon?.('visits')}</span>
           </th>
-          <th className="short-urls-table__header-cell">&nbsp;</th>
+          <th className="short-urls-table__header-cell" colSpan={2} />
         </tr>
       </thead>
       <tbody>
diff --git a/src/short-urls/helpers/ShortUrlStatus.tsx b/src/short-urls/helpers/ShortUrlStatus.tsx
index 82e61b65..11372206 100644
--- a/src/short-urls/helpers/ShortUrlStatus.tsx
+++ b/src/short-urls/helpers/ShortUrlStatus.tsx
@@ -15,7 +15,7 @@ interface ShortUrlStatusProps {
 interface StatusResult {
   icon: IconDefinition;
   className: string;
-  description?: ReactNode;
+  description: ReactNode;
 }
 
 const resolveShortUrlStatus = (shortUrl: ShortUrl): StatusResult => {
@@ -65,6 +65,7 @@ const resolveShortUrlStatus = (shortUrl: ShortUrl): StatusResult => {
   return {
     icon: faCheck,
     className: 'text-primary',
+    description: 'This short URL can be visited normally.',
   };
 };
 
@@ -81,11 +82,9 @@ export const ShortUrlStatus: FC<ShortUrlStatusProps> = ({ shortUrl }) => {
       >
         <FontAwesomeIcon icon={icon} />
       </span>
-      {description && (
-        <UncontrolledTooltip target={(() => tooltipRef.current) as any} placement="right">
-          {description}
-        </UncontrolledTooltip>
-      )}
+      <UncontrolledTooltip target={(() => tooltipRef.current) as any} placement="bottom">
+        {description}
+      </UncontrolledTooltip>
     </>
   );
 };
diff --git a/src/short-urls/helpers/ShortUrlsRow.tsx b/src/short-urls/helpers/ShortUrlsRow.tsx
index b97b3c57..ae942518 100644
--- a/src/short-urls/helpers/ShortUrlsRow.tsx
+++ b/src/short-urls/helpers/ShortUrlsRow.tsx
@@ -37,9 +37,6 @@ export const ShortUrlsRow = (
       <td className="indivisible short-urls-row__cell responsive-table__cell" data-th="Created at">
         <Time date={shortUrl.dateCreated} />
       </td>
-      <td className="responsive-table__cell short-urls-row__cell" data-th="Status">
-        <ShortUrlStatus shortUrl={shortUrl} />
-      </td>
       <td className="responsive-table__cell short-urls-row__cell" data-th="Short URL">
         <span className="position-relative short-urls-row__cell--indivisible">
           <span className="short-urls-row__short-url-wrapper">
@@ -73,6 +70,9 @@ export const ShortUrlsRow = (
           active={active}
         />
       </td>
+      <td className="responsive-table__cell short-urls-row__cell" data-th="Status">
+        <ShortUrlStatus shortUrl={shortUrl} />
+      </td>
       <td className="responsive-table__cell short-urls-row__cell">
         <ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} />
       </td>