Added a tooltip to the "Copy link" button

refs https://github.com/TryGhost/Product/issues/3974
This commit is contained in:
Djordje Vlaisavljevic 2023-10-04 18:12:55 +01:00
parent 1e5b52b368
commit cbd43d38a8

View File

@ -9,6 +9,7 @@ import EditRecommendationModal from './EditRecommendationModal';
import Link from '../../../../admin-x-ds/global/Link'; import Link from '../../../../admin-x-ds/global/Link';
import NiceModal from '@ebay/nice-modal-react'; import NiceModal from '@ebay/nice-modal-react';
import TableRow from '../../../../admin-x-ds/global/TableRow'; import TableRow from '../../../../admin-x-ds/global/TableRow';
import Tooltip from '../../../../admin-x-ds/global/Tooltip';
import useRouting from '../../../../hooks/useRouting'; import useRouting from '../../../../hooks/useRouting';
import useSettingGroup from '../../../../hooks/useSettingGroup'; import useSettingGroup from '../../../../hooks/useSettingGroup';
import {PaginationData} from '../../../../hooks/usePagination'; import {PaginationData} from '../../../../hooks/usePagination';
@ -82,7 +83,12 @@ const RecommendationList: React.FC<RecommendationListProps> = ({recommendations,
}; };
if (isLoading || recommendations.length) { if (isLoading || recommendations.length) {
return <Table 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><Button color='clear' hideLabel={true} icon={copied ? 'check-circle' : 'duplicate'} iconColorClass={copied ? 'text-green' : 'text-grey-600 hover:opacity-80'} label={copied ? 'Copied' : 'Copy'} size='sm' unstyled={true} onClick={copyRecommendationsUrl} /></span>} isLoading={isLoading} pagination={pagination} showMore={showMore} hintSeparator> return <Table
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 content={copied ? 'Copied' : 'Copy link'} size='sm'><Button color='clear' hideLabel={true} icon={copied ? 'check-circle' : 'duplicate'} iconColorClass={copied ? 'text-green' : 'text-grey-600 hover:opacity-80'} label={copied ? 'Copied' : 'Copy'} size='sm' unstyled={true} onClick={copyRecommendationsUrl} /></Tooltip></span>}
isLoading={isLoading}
pagination={pagination}
showMore={showMore}
hintSeparator>
{recommendations && recommendations.map(recommendation => <RecommendationItem key={recommendation.id} recommendation={recommendation} />)} {recommendations && recommendations.map(recommendation => <RecommendationItem key={recommendation.id} recommendation={recommendation} />)}
</Table>; </Table>;
} else { } else {