Skip to content
This repository was archived by the owner on Sep 30, 2024. It is now read-only.

Commit 8fca471

Browse files
author
Justin Boyson
committed
extract insight decoration components
1 parent a45f313 commit 8fca471

File tree

6 files changed

+143
-99
lines changed

6 files changed

+143
-99
lines changed

‎client/web/src/insights/components/InsightDecorationContent.module.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.insight-decoration-content {
2+
background-color: var(--primary-4);
3+
padding: 1px 3px;
4+
cursor: pointer;
5+
}

‎client/web/src/insights/components/InsightDecorationContent.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { forwardRef, PropsWithChildren } from 'react'
2+
3+
import styles from './InsightDecorationContent.module.scss'
4+
5+
export const InsightDecorationContent = forwardRef<HTMLSpanElement, PropsWithChildren<{}>>(({ children }, ref) => (
6+
<span ref={ref} className={styles.insightDecorationContent}>
7+
{children}
8+
</span>
9+
))
10+
11+
InsightDecorationContent.displayName = 'InsightDecorationContent'

‎client/web/src/insights/components/InsightDecorationPopover.module.scss

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.insight-decoration-popover {
2+
background-color: var(--color-bg-1);
3+
padding: 12px;
4+
border-radius: 4px;
5+
border: solid 1px var(--border-color);
6+
box-shadow: var(--dropdown-shadow);
7+
}
8+
9+
.insight-decoration-line-ref {
10+
color: var(--text-muted);
11+
font-size: 0.625rem;
12+
font-weight: 400;
13+
}
14+
15+
.insight-decoration-link {
16+
font-size: 0.75rem;
17+
font-weight: 400;
18+
}
19+
20+
.insight-decoration-row {
21+
padding-left: 16px;
22+
margin-left: 4px;
23+
border-left: solid 2px var(--border-color-2);
24+
}
25+
26+
.insight-decoration-section {
27+
margin-bottom: 8px;
28+
}

‎client/web/src/insights/components/InsightDecorationPopover.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { FC } from 'react'
2+
3+
import classNames from 'classnames'
4+
import OpenInNewIcon from 'mdi-react/OpenInNewIcon'
5+
6+
import { Link } from '@sourcegraph/wildcard'
7+
8+
import styles from './InsightDecorationPopover.module.scss'
9+
10+
interface TokenInsight {
11+
id: string
12+
name: string
13+
url: string
14+
}
15+
16+
interface Token {
17+
name: string
18+
insights: TokenInsight[]
19+
}
20+
21+
interface InsightDecorationPopoverProps {
22+
tokens: Token[]
23+
}
24+
25+
export const InsightDecorationPopover: FC<InsightDecorationPopoverProps> = ({ tokens }) => (
26+
<div className={styles.insightDecorationPopover}>
27+
{tokens.map(token => (
28+
<div key={token.name} className={styles.insightDecorationSection}>
29+
<div>
30+
<span>{'{}'}</span>
31+
<small className="ml-2">
32+
<strong>{token.name}</strong>
33+
</small>
34+
</div>
35+
<div className={classNames(styles.insightDecorationRow, styles.insightDecorationLineRef)}>
36+
Insights referencing this line ({token.insights.length})
37+
</div>
38+
{token.insights.map(insight => (
39+
<div key={insight.id} className={classNames(styles.insightDecorationRow)}>
40+
<Link to={insight.url} className={styles.insightDecorationLink}>
41+
{insight.name} <OpenInNewIcon size={12} />
42+
</Link>
43+
</div>
44+
))}
45+
</div>
46+
))}
47+
</div>
48+
)

‎client/web/src/repo/blob/Blob.module.scss

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -124,38 +124,3 @@
124124
background-color: var(--body-bg);
125125
color: var(--body-color);
126126
}
127-
128-
.insight-decoration-content {
129-
background-color: var(--primary-4);
130-
padding: 1px 3px;
131-
cursor: pointer;
132-
}
133-
134-
.insight-decoration-popover {
135-
background-color: var(--color-bg-1);
136-
padding: 12px;
137-
border-radius: 4px;
138-
border: solid 1px var(--border-color);
139-
box-shadow: var(--dropdown-shadow);
140-
}
141-
142-
.insight-decoration-line-ref {
143-
color: var(--text-muted);
144-
font-size: 0.625rem;
145-
font-weight: 400;
146-
}
147-
148-
.insight-decoration-link {
149-
font-size: 0.75rem;
150-
font-weight: 400;
151-
}
152-
153-
.insight-decoration-row {
154-
padding-left: 16px;
155-
margin-left: 4px;
156-
border-left: solid 2px var(--border-color-2);
157-
}
158-
159-
.insight-decoration-section {
160-
margin-bottom: 8px;
161-
}

‎client/web/src/repo/blob/Blob.tsx

Lines changed: 51 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import React, { FC, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react'
1+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
22

33
import classNames from 'classnames'
44
import { Remote } from 'comlink'
55
import * as H from 'history'
66
import iterate from 'iterare'
77
import { isEqual, sortBy } from 'lodash'
8-
import OpenInNewIcon from 'mdi-react/OpenInNewIcon'
98
import {
109
BehaviorSubject,
1110
combineLatest,
@@ -83,11 +82,13 @@ import {
8382
toURIWithPath,
8483
parseQueryAndHash,
8584
} from '@sourcegraph/shared/src/util/url'
86-
import { Code, Link, useObservable } from '@sourcegraph/wildcard'
85+
import { Code, useObservable } from '@sourcegraph/wildcard'
8786

8887
import { getHover, getDocumentHighlights } from '../../backend/features'
8988
import { WebHoverOverlay } from '../../components/shared'
9089
import { StatusBar } from '../../extensions/components/StatusBar'
90+
import { InsightDecorationContent } from '../../insights/components/InsightDecorationContent'
91+
import { InsightDecorationPopover } from '../../insights/components/InsightDecorationPopover'
9192
import { enableExtensionsDecorationsColumnViewFromSettings } from '../../util/settings'
9293
import { HoverThresholdProps } from '../RepoContainer'
9394

@@ -175,75 +176,61 @@ const domFunctions = {
175176
const STATUS_BAR_HORIZONTAL_GAP_VAR = '--blob-status-bar-horizontal-gap'
176177
const STATUS_BAR_VERTICAL_GAP_VAR = '--blob-status-bar-vertical-gap'
177178

178-
const InsightDecorationContent = forwardRef<HTMLSpanElement>((props, ref) => (
179-
<span ref={ref} className={styles.insightDecorationContent}>
180-
Referenced in <strong>5 insights</strong> 📈
181-
</span>
182-
))
183-
184-
InsightDecorationContent.displayName = 'InsightDecorationContent'
185-
186-
const InsightDecorationPopover: FC = () => (
187-
<div className={styles.insightDecorationPopover}>
188-
<div className={styles.insightDecorationSection}>
189-
<div>
190-
<span>{'{}'}</span>
191-
<small className="ml-2">
192-
<strong>AuthURLPrefix</strong>
193-
</small>
194-
</div>
195-
<div className={classNames(styles.insightDecorationRow, styles.insightDecorationLineRef)}>
196-
Insights referencing this line (3)
197-
</div>
198-
<div className={classNames(styles.insightDecorationRow)}>
199-
<Link to="/insights" className={styles.insightDecorationLink}>
200-
Track Middleware <OpenInNewIcon size={12} />
201-
</Link>
202-
</div>
203-
<div className={classNames(styles.insightDecorationRow)}>
204-
<Link to="/insights" className={styles.insightDecorationLink}>
205-
API Middleware <OpenInNewIcon size={12} />
206-
</Link>
207-
</div>
208-
<div className={classNames(styles.insightDecorationRow)}>
209-
<Link to="/insights" className={styles.insightDecorationLink}>
210-
API Tracking <OpenInNewIcon size={12} />
211-
</Link>
212-
</div>
213-
</div>
214-
<div className={styles.insightDecorationSection}>
215-
<div>
216-
<span>{'{}'}</span>
217-
<small className="ml-2">
218-
<strong>""./auth"</strong>
219-
</small>
220-
</div>
221-
<div className={classNames(styles.insightDecorationRow, styles.insightDecorationLineRef)}>
222-
Insights referencing this line (2)
223-
</div>
224-
<div className={classNames(styles.insightDecorationRow)}>
225-
<Link to="/insights" className={styles.insightDecorationLink}>
226-
Auth protocols <OpenInNewIcon size={12} />
227-
</Link>
228-
</div>
229-
<div className={classNames(styles.insightDecorationRow)}>
230-
<Link to="/insights" className={styles.insightDecorationLink}>
231-
Auth Middleware <OpenInNewIcon size={12} />
232-
</Link>
233-
</div>
234-
</div>
235-
</div>
236-
)
179+
// BEGIN STATIC CODE INSIGHTS TEST DATA
180+
const insightTokens = [
181+
{
182+
name: 'AuthURLPrefix',
183+
insights: [
184+
{
185+
id: 'foo',
186+
name: 'Track Middleware',
187+
url: '/insights/foo',
188+
},
189+
{
190+
id: 'bar',
191+
name: 'API Middleware',
192+
url: '/insights/bar',
193+
},
194+
{
195+
id: 'baz',
196+
name: 'API Tracking',
197+
url: '/insights/baz',
198+
},
199+
],
200+
},
201+
{
202+
name: '"/.auth"',
203+
insights: [
204+
{
205+
id: 'foo',
206+
name: 'Auth Middleware',
207+
url: '/insights/foo',
208+
},
209+
{
210+
id: 'bar',
211+
name: 'Auth APIs',
212+
url: '/insights/bar',
213+
},
214+
],
215+
},
216+
]
237217

238218
const decoration: InsightDecoration = {
239219
range: {
240220
start: { line: 0, character: 0 },
241221
end: { line: 0, character: 0 },
242222
},
243-
content: <InsightDecorationContent />,
244-
popover: <InsightDecorationPopover />,
223+
content: (
224+
<InsightDecorationContent>
225+
<>
226+
Referenced in <strong>5 insights</strong> 📈
227+
</>
228+
</InsightDecorationContent>
229+
),
230+
popover: <InsightDecorationPopover tokens={insightTokens} />,
245231
trigger: 'click',
246232
}
233+
// END STATIC CODE INSIGHTS TEST DATA
247234

248235
/**
249236
* Renders a code view augmented by Sourcegraph extensions

0 commit comments

Comments
 (0)