From 45239fcc3795f6185f4d30c2f76bdceb65ffe8c0 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Thu, 12 Oct 2023 13:40:59 +0100
Subject: [PATCH] Added header to Recommendations table

refs https://github.com/TryGhost/Product/issues/4024
---
 .../settings/site/recommendations/RecommendationList.tsx    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
index 92ca5f4773..2ea107908f 100644
--- a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
@@ -7,6 +7,7 @@ import React, {useState} from 'react';
 import RecommendationIcon from './RecommendationIcon';
 import Table, {ShowMoreData} from '../../../../admin-x-ds/global/Table';
 import TableCell from '../../../../admin-x-ds/global/TableCell';
+import TableHead from '../../../../admin-x-ds/global/TableHead';
 import TableRow from '../../../../admin-x-ds/global/TableRow';
 import Tooltip from '../../../../admin-x-ds/global/Tooltip';
 import useRouting from '../../../../hooks/useRouting';
@@ -53,7 +54,7 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
                     </div>
                 </div>
             </TableCell>
-            <TableCell className='hidden !pr-1 pl-0 text-right align-middle md:!visible md:!table-cell' onClick={showDetails}>
+            <TableCell className='hidden w-[1%] whitespace-nowrap !pr-1 pl-0 text-right align-middle md:!visible md:!table-cell' padding={false} onClick={showDetails}>
                 {(count === 0) ? (<span className="text-grey-500 dark:text-grey-900">-</span>) : (<div className='-mt-px items-end gap-1 text-right'>
                     <span className='text-right'>{numberWithCommas(count)}</span>
                 </div>)}
@@ -86,8 +87,11 @@ const RecommendationList: React.FC<RecommendationListProps> = ({recommendations,
         setTimeout(() => setCopied(false), 2000);
     };
 
+    const tableHeader = (<><TableHead>Site</TableHead><TableHead colSpan={2}>Conversions from you</TableHead></>);
+
     if (isLoading || recommendations.length) {
         return <Table
+            header={tableHeader}
             hint={<span className='flex items-center gap-1'>Shared with new members after signup, or anytime using <Link href={recommendationsURL} target='_blank'>this link</Link><Tooltip containerClassName='leading-none' content={copied ? 'Copied' : 'Copy link'} size='sm'><Button color='clear' hideLabel={true} icon={copied ? 'check-circle' : 'duplicate'} iconColorClass={copied ? 'text-green w-[14px] h-[14px]' : 'text-grey-600 hover:opacity-80 w-[14px] h-[14px]'} label={copied ? 'Copied' : 'Copy'} unstyled={true} onClick={copyRecommendationsUrl} /></Tooltip></span>}
             isLoading={isLoading}
             pagination={pagination}