chore: lint anchor elements (#18227)

PostHog · Nov 2, 2023 · 3819d76 · 3819d76
1 parent 50811b4
commit 3819d76
Show file tree

Hide file tree

Showing 63 changed files with 288 additions and 282 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -142,10 +142,6 @@ module.exports = {
                         element: 'Select',
                         message: 'use <LemonSelect> instead',
                     },
-                    {
-                        element: 'a',
-                        message: 'use <Link> instead',
-                    },
                 ],
             },
         ],
@@ -189,6 +185,10 @@ module.exports = {
                         element: 'ReactMarkdown',
                         message: 'use <LemonMarkdown> instead',
                     },
+                    {
+                        element: 'a',
+                        message: 'use <Link> instead',
+                    },
                 ],
             },
         ],

diff --git a/frontend/__snapshots__/components-hogqleditor--hog-ql-editor.png b/frontend/__snapshots__/components-hogqleditor--hog-ql-editor.png
diff --git a/...d/__snapshots__/components-hogqleditor--no-value-person-properties-disabled.png b/...d/__snapshots__/components-hogqleditor--no-value-person-properties-disabled.png
diff --git a/frontend/__snapshots__/components-hogqleditor--no-value.png b/frontend/__snapshots__/components-hogqleditor--no-value.png
diff --git a/frontend/__snapshots__/scenes-other-preflight--preflight.png b/frontend/__snapshots__/scenes-other-preflight--preflight.png
diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx
@@ -70,12 +70,12 @@ function Header({
                         {!hideEdit &&
                             isViewable &&
                             (hasTaxonomyFeatures ? (
-                                <a onClick={onEdit}>Edit</a>
+                                <Link onClick={onEdit}>Edit</Link>
                             ) : (
                                 <Tooltip title="Creating and editing definitions require a premium license">
-                                    <a onClick={onEdit} className="definition-popover-disabled-button">
+                                    <Link onClick={onEdit} className="definition-popover-disabled-button">
                                         Edit
-                                    </a>
+                                    </Link>
                                 </Tooltip>
                             ))}
                         {!hideView && isViewable && (

diff --git a/frontend/src/lib/components/HogQLEditor/HogQLEditor.tsx b/frontend/src/lib/components/HogQLEditor/HogQLEditor.tsx
@@ -5,6 +5,7 @@ import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { IconErrorOutline, IconInfo } from 'lib/lemon-ui/icons'
 import { useActions, useValues } from 'kea'
 import { hogQLEditorLogic } from './hogQLEditorLogic'
+import { Link } from '@posthog/lemon-ui'
 
 export interface HogQLEditorProps {
     onChange: (value: string) => void
@@ -93,9 +94,9 @@ export function HogQLEditor({
                         disablePersonProperties ? '' : 'w-full '
                     }text-right select-none ${CLICK_OUTSIDE_BLOCK_CLASS}`}
                 >
-                    <a href="https://posthog.com/manual/hogql" target={'_blank'}>
+                    <Link to="https://posthog.com/manual/hogql" target="_blank">
                         Learn more about HogQL
-                    </a>
+                    </Link>
                 </div>
             </div>
         </>

diff --git a/frontend/src/lib/components/JSBookmarklet.tsx b/frontend/src/lib/components/JSBookmarklet.tsx
@@ -13,6 +13,7 @@ export function JSBookmarklet({ team }: { team: TeamBasicType }): JSX.Element {
 
     return (
         <>
+            {/* eslint-disable-next-line react/forbid-elements */}
             <a
                 href={href}
                 className="w-full text-primary-alt bg-primary-alt-highlight rounded-lg justify-center p-4 flex font-bold gap-2 items-center"

diff --git a/frontend/src/lib/components/PayGateMini/PayGateMini.tsx b/frontend/src/lib/components/PayGateMini/PayGateMini.tsx
@@ -7,6 +7,7 @@ import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import './PayGateMini.scss'
 import { FEATURE_MINIMUM_PLAN, POSTHOG_CLOUD_STANDARD_PLAN } from 'lib/constants'
 import clsx from 'clsx'
+import { Link } from '@posthog/lemon-ui'
 
 type PayGateSupportedFeatures =
     | AvailableFeature.DASHBOARD_PERMISSIONING
@@ -124,9 +125,9 @@ export function PayGateMini({
                 {featureSummary.docsHref && (
                     <>
                         {' '}
-                        <a href={featureSummary.docsHref} target="_blank" rel="noopener noreferrer">
+                        <Link to={featureSummary.docsHref} target="_blank">
                             Learn more in PostHog Docs.
-                        </a>
+                        </Link>
                     </>
                 )}
             </div>

diff --git a/frontend/src/lib/components/PersonalAPIKeys/PersonalAPIKeys.tsx b/frontend/src/lib/components/PersonalAPIKeys/PersonalAPIKeys.tsx
@@ -8,7 +8,7 @@ import { humanFriendlyDetailedTime } from 'lib/utils'
 import { CopyToClipboardInline } from '../CopyToClipboard'
 import { ColumnsType } from 'antd/lib/table'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { LemonInput, LemonModal } from '@posthog/lemon-ui'
+import { LemonInput, LemonModal, Link } from '@posthog/lemon-ui'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { IconPlus } from 'lib/lemon-ui/icons'
 
@@ -94,7 +94,7 @@ function RowActionsCreator(
                     deleteKey(personalAPIKey)
                 }}
             >
-                <a className="text-danger">Delete</a>
+                <span className="text-danger">Danger</span>
             </Popconfirm>
         )
     }
@@ -156,14 +156,14 @@ export function PersonalAPIKeys(): JSX.Element {
             <p>
                 These keys allow full access to your personal account through the API, as if you were logged in. You can
                 also use them in integrations, such as{' '}
-                <a href="https://zapier.com/apps/posthog/">our premium Zapier one</a>.
+                <Link to="https://zapier.com/apps/posthog/">our premium Zapier one</Link>.
                 <br />
                 Try not to keep disused keys around. If you have any suspicion that one of these may be compromised,
                 delete it and use a new one.
                 <br />
-                <a href="https://posthog.com/docs/api/overview#authentication">
+                <Link to="https://posthog.com/docs/api/overview#authentication">
                     More about API authentication in PostHog Docs.
-                </a>
+                </Link>
             </p>
             <LemonButton
                 type="primary"

diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
@@ -4,15 +4,15 @@ import { KEY_MAPPING, keyMappingKeys } from 'lib/taxonomy'
 import { PropertyKeyInfo } from '../PropertyKeyInfo'
 import { Dropdown, Input, Menu, Popconfirm } from 'antd'
 import { isURL } from 'lib/utils'
-import { IconDeleteForever, IconOpenInNew } from 'lib/lemon-ui/icons'
+import { IconDeleteForever } from 'lib/lemon-ui/icons'
 import './PropertiesTable.scss'
 import { LemonTable, LemonTableColumns, LemonTableProps } from 'lib/lemon-ui/LemonTable'
 import { CopyToClipboardInline } from '../CopyToClipboard'
 import { useValues } from 'kea'
 import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { NewPropertyComponent } from 'scenes/persons/NewPropertyComponent'
-import { LemonCheckbox, LemonInput } from '@posthog/lemon-ui'
+import { LemonCheckbox, LemonInput, Link } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { PropertyDefinitionType } from '~/types'
 
@@ -93,10 +93,9 @@ function ValueDisplay({
             {!isURL(value) ? (
                 valueString
             ) : (
-                <a href={value} target="_blank" rel="noopener noreferrer" className="value-link">
-                    <span>{valueString}</span>
-                    <IconOpenInNew />
-                </a>
+                <Link to={value} target="_blank" className="value-link" targetBlankIcon>
+                    {valueString}
+                </Link>
             )}
         </span>
     )

diff --git a/frontend/src/lib/components/SocialLoginButton/SocialLoginButton.tsx b/frontend/src/lib/components/SocialLoginButton/SocialLoginButton.tsx
@@ -7,6 +7,7 @@ import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { router, combineUrl } from 'kea-router'
+import { Link } from '@posthog/lemon-ui'
 
 interface SocialLoginLinkProps {
     provider: SSOProvider
@@ -28,9 +29,9 @@ function SocialLoginLink({ provider, extraQueryParams, children }: SocialLoginLi
     const loginUrl = combineUrl(`/login/${provider}/`, loginParams).url
 
     return (
-        <a className="block" href={loginUrl}>
+        <Link className="block" to={loginUrl}>
             {children}
-        </a>
+        </Link>
     )
 }
 

diff --git a/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx b/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx
@@ -8,7 +8,7 @@ import { dayjs } from 'lib/dayjs'
 import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
 import { subscriptionLogic } from '../subscriptionLogic'
 import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/UserActivityIndicator'
-import { IconChevronLeft, IconOpenInNew } from 'lib/lemon-ui/icons'
+import { IconChevronLeft } from 'lib/lemon-ui/icons'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { subscriptionsLogic } from '../subscriptionsLogic'
 import {
@@ -158,13 +158,13 @@ export function EditSubscription({
                                     . <br />
                                     If this value is not configured correctly PostHog may be unable to correctly send
                                     Subscriptions.{' '}
-                                    <a
+                                    <Link
+                                        to="https://posthog.com/docs/configuring-posthog/environment-variables?utm_medium=in-product&utm_campaign=subcriptions-system-status-site-url-misconfig"
                                         target="_blank"
-                                        rel="noopener"
-                                        href="https://posthog.com/docs/configuring-posthog/environment-variables?utm_medium=in-product&utm_campaign=subcriptions-system-status-site-url-misconfig"
+                                        targetBlankIcon
                                     >
-                                        Learn more <IconOpenInNew />
-                                    </a>
+                                        Learn more
+                                    </Link>
                                 </>
                             </LemonBanner>
                         )}
@@ -184,14 +184,13 @@ export function EditSubscription({
                                         <>
                                             Email subscriptions are not currently possible as this PostHog instance
                                             isn't{' '}
-                                            <a
-                                                href="https://posthog.com/docs/self-host/configure/email"
+                                            <Link
+                                                to="https://posthog.com/docs/self-host/configure/email"
                                                 target="_blank"
-                                                rel="noopener"
+                                                targetBlankIcon
                                             >
                                                 configured&nbsp;to&nbsp;send&nbsp;emails&nbsp;
-                                                <IconOpenInNew />
-                                            </a>
+                                            </Link>
                                             .
                                         </>
                                     </LemonBanner>
@@ -233,8 +232,8 @@ export function EditSubscription({
                                                         Slack is not yet configured for this project. Add PostHog to
                                                         your Slack workspace to continue.
                                                     </span>
-                                                    <a
-                                                        href={
+                                                    <Link
+                                                        to={
                                                             addToSlackButtonUrl(
                                                                 window.location.pathname + '?target_type=slack'
                                                             ) || ''
@@ -247,7 +246,7 @@ export function EditSubscription({
                                                             src="https://platform.slack-edge.com/img/add_to_slack.png"
                                                             srcSet="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/[email protected] 2x"
                                                         />
-                                                    </a>
+                                                    </Link>
                                                 </div>
                                             </LemonBanner>
                                         ) : (
@@ -272,13 +271,12 @@ export function EditSubscription({
                                             help={
                                                 <>
                                                     Private channels are only shown if you have{' '}
-                                                    <a
-                                                        href="https://posthog.com/docs/integrate/third-party/slack"
+                                                    <Link
+                                                        to="https://posthog.com/docs/integrate/third-party/slack"
                                                         target="_blank"
-                                                        rel="noopener"
                                                     >
                                                         added the PostHog Slack App
-                                                    </a>{' '}
+                                                    </Link>{' '}
                                                     to them
                                                 </>
                                             }
@@ -304,13 +302,12 @@ export function EditSubscription({
                                                             The PostHog Slack App is not in this channel. Please add it
                                                             to the channel otherwise Subscriptions will fail to be
                                                             delivered.{' '}
-                                                            <a
-                                                                href="https://posthog.com/docs/integrate/third-party/slack"
+                                                            <Link
+                                                                to="https://posthog.com/docs/integrate/third-party/slack"
                                                                 target="_blank"
-                                                                rel="noopener"
                                                             >
                                                                 See the Docs for more information
-                                                            </a>
+                                                            </Link>
                                                         </span>
                                                         <LemonButton
                                                             type="secondary"

diff --git a/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.tsx b/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.tsx
@@ -30,9 +30,9 @@ export function LemonLabel({
             {showOptional ? <span className="LemonLabel__extra">(optional)</span> : null}
 
             {onExplanationClick ? (
-                <a onClick={onExplanationClick}>
+                <Link onClick={onExplanationClick}>
                     <span className="LemonLabel__extra">(what is this?)</span>
-                </a>
+                </Link>
             ) : null}
 
             {info ? (

diff --git a/frontend/src/lib/lemon-ui/Link/Link.tsx b/frontend/src/lib/lemon-ui/Link/Link.tsx
@@ -42,6 +42,10 @@ const shouldForcePageLoad = (input: any): boolean => {
     return !!FORCE_PAGE_LOAD.find((x) => input.startsWith(x))
 }
 
+const isPostHogDomain = (url: string): boolean => {
+    return /https:\/\/((app|eu)\.)?posthog\.com'/.test(url)
+}
+
 /**
  * Link
  *
@@ -95,14 +99,17 @@ export const Link: React.FC<LinkProps & React.RefAttributes<HTMLElement>> = Reac
             }
         }
 
+        const rel = typeof to === 'string' && isPostHogDomain(to) ? 'noopener' : 'noopener noreferrer'
+
         return to ? (
+            // eslint-disable-next-line react/forbid-elements
             <a
                 ref={ref as any}
                 className={clsx('Link', className)}
                 onClick={onClick}
                 href={typeof to === 'string' ? to : '#'}
                 target={target}
-                rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+                rel={target === '_blank' ? rel : undefined}
                 {...props}
                 {...draggableProps}
             >

diff --git a/frontend/src/lib/taxonomy.tsx b/frontend/src/lib/taxonomy.tsx
@@ -1,4 +1,5 @@
 import { KeyMapping, PropertyFilterValue } from '~/types'
+import { Link } from './lemon-ui/Link'
 
 export interface KeyMappingInterface {
     event: Record<string, KeyMapping>
@@ -673,7 +674,7 @@ export const KEY_MAPPING: KeyMappingInterface = {
             description: (
                 <span>
                     The duration of the session being tracked. Learn more about how PostHog tracks sessions in{' '}
-                    <a href="https://posthog.com/docs/user-guides/sessions">our documentation.</a>
+                    <Link to="https://posthog.com/docs/user-guides/sessions">our documentation.</Link>
                     <br /> <br />
                     Note, if the duration is formatted as a single number (not 'HH:MM:SS'), it's in seconds.
                 </span>

diff --git a/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx b/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx
@@ -93,9 +93,9 @@ export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element {
                                 overlay: (
                                     <div>
                                         Run SQL queries with{' '}
-                                        <a href="https://posthog.com/manual/hogql" target={'_blank'}>
+                                        <Link to="https://posthog.com/manual/hogql" target="_blank">
                                             HogQL
-                                        </a>
+                                        </Link>
                                         , our wrapper around ClickHouse SQL. Explore the{' '}
                                         <Link
                                             to={

diff --git a/frontend/src/queries/nodes/InsightViz/InsightContainer.tsx b/frontend/src/queries/nodes/InsightViz/InsightContainer.tsx
@@ -34,6 +34,7 @@ import { FunnelStepsTable } from 'scenes/insights/views/Funnels/FunnelStepsTable
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 import { FunnelCorrelation } from 'scenes/insights/views/Funnels/FunnelCorrelation'
 import { InsightResultMetadata } from './InsightResultMetadata'
+import { Link } from '@posthog/lemon-ui'
 
 const VIEW_MAP = {
     [`${InsightType.TRENDS}`]: <TrendInsight view={InsightType.TRENDS} />,
@@ -201,7 +202,7 @@ export function InsightContainer({
                     <LemonBanner type="info">
                         When using sessions and session properties, events without session IDs will be excluded from the
                         set of results.{' '}
-                        <a href="https://posthog.com/docs/user-guides/sessions">Learn more about sessions.</a>
+                        <Link to="https://posthog.com/docs/user-guides/sessions">Learn more about sessions.</Link>
                     </LemonBanner>
                 </div>
             ) : null}