artin/sourcegraph
1
0
Fork 0
mirror of https://github.com/sourcegraph/sourcegraph.git synced 2026-02-06 19:51:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

[SG-35217] Wildcard V2: <Typography /> Manual migration Text (#35232)

Browse Source 
Co-authored-by: gitstart-sourcegraph <gitstart@users.noreply.github.com>
This commit is contained in:
GitStart-SourceGraph 2022-05-27 13:51:43 +08:00 committed by GitHub
parent 0f3f278e05
commit 2abe73cfca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
214 changed files with 1164 additions and 1044 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc.js
View File

@ -142,6 +142,11 @@ See https://handbook.sourcegraph.com/community/faq#is-all-of-sourcegraph-open-so
element: 'h6',
message: 'Use the <Typography.H6 /> component from @sourcegraph/wildcard instead.',
},
{
element: 'p',
message:
'Use the <Text /> component from @sourcegraph/wildcard instead. Check out the RFC for more context: https://bit.ly/3PFw0HM',
},
{
element: 'code',
message: 'Use the <Typography.Code /> component from @sourcegraph/wildcard instead.',

206
client/branded/src/global-styles/GlobalStylesStory/GlobalStyles.story.tsx
View File

@ -11,7 +11,22 @@ import classNames from 'classnames'
import 'storybook-addon-designs'
import { highlightCodeSafe, registerHighlightContributions } from '@sourcegraph/common'
import { TextArea, Button, ButtonGroup, Link, Select, BUTTON_SIZES, Checkbox, Typography } from '@sourcegraph/wildcard'
import {
TextArea,
Button,
ButtonGroup,
Link,
Select,
BUTTON_SIZES,
Checkbox,
Text,
Code,
Label,
H1,
H2,
H3,
H4,
} from '@sourcegraph/wildcard'
import { BrandedStory } from '../../components/BrandedStory'
import { CodeSnippet } from '../../components/CodeSnippet'
@ -39,15 +54,15 @@ const config: Meta = {
export default config
export const Text: Story = () => (
export const TextTypography: Story = () => (
<>
<Typography.H1>Typography</Typography.H1>
<H1>Typography</H1>
<TextStory />
</>
)
Text.parameters = {
TextTypography.parameters = {
design: {
name: 'Figma',
type: 'figma',
@ -58,22 +73,21 @@ Text.parameters = {
type ButtonSizesType = typeof BUTTON_SIZES[number] | undefined
export const Code: Story = () => (
export const CodeTypography: Story = () => (
<>
<Typography.H1>Code</Typography.H1>
<H1>Code</H1>
<Typography.H2>Inline Code</Typography.H2>
<p>
Example of <Typography.Code>inline code</Typography.Code> that can be achieved with the{' '}
<Typography.Code>{'<code>'}</Typography.Code> element.
</p>
<H2>Inline Code</H2>
<Text>
Example of <Code>inline code</Code> that can be achieved with the <Code>{'<code>'}</Code> element.
</Text>
<Typography.H2>Highlighted multi-line code</Typography.H2>
<p>Custom highlight.js themes are defined for both light and dark themes.</p>
<H2>Highlighted multi-line code</H2>
<Text>Custom highlight.js themes are defined for both light and dark themes.</Text>
<Typography.H3>TypeScript</Typography.H3>
<H3>TypeScript</H3>
<pre>
<Typography.Code
<Code
dangerouslySetInnerHTML={{
__html: highlightCodeSafe(
['const foo = 123', 'const bar = "Hello World!"', 'console.log(foo)'].join('\n'),
@ -83,9 +97,9 @@ export const Code: Story = () => (
/>
</pre>
<Typography.H3>JSON</Typography.H3>
<H3>JSON</H3>
<pre>
<Typography.Code
<Code
dangerouslySetInnerHTML={{
__html: highlightCodeSafe(
['{', ' "someString": "Hello World!",', ' "someNumber": 123', '}'].join('\n'),
@ -95,9 +109,9 @@ export const Code: Story = () => (
/>
</pre>
<Typography.H3>Diffs</Typography.H3>
<H3>Diffs</H3>
<pre>
<Typography.Code
<Code
dangerouslySetInnerHTML={{
__html: highlightCodeSafe(
[
@ -112,27 +126,26 @@ export const Code: Story = () => (
/>
</pre>
<Typography.H2>Keyboard shortcuts</Typography.H2>
<p>
Keyboard shortcuts should use <Typography.Code>{'<kbd>'}</Typography.Code>, not{' '}
<Typography.Code>{'<code>'}</Typography.Code>. For example, <kbd>cmd</kbd>+<kbd>C</kbd> is used to copy text
to the clipboard.
</p>
<Typography.H3>Code snippets</Typography.H3>
<p>
<H2>Keyboard shortcuts</H2>
<Text>
Keyboard shortcuts should use <Code>{'<kbd>'}</Code>, not <Code>{'<code>'}</Code>. For example,{' '}
<kbd>cmd</kbd>+<kbd>C</kbd> is used to copy text to the clipboard.
</Text>
<H3>Code snippets</H3>
<Text>
Highlighted code pieces should go in a panel separating it from the surrounding content. Use{' '}
<Typography.Code>{'<CodeSnippet />'}</Typography.Code> for these uses.
</p>
<Code>{'<CodeSnippet />'}</Code> for these uses.
</Text>
<CodeSnippet code="property: 1" language="yaml" />
</>
)
export const Colors: Story = () => (
<>
<Typography.H1>Colors</Typography.H1>
<H1>Colors</H1>
<Typography.H2>Semantic colors</Typography.H2>
<p>These can be used to give semantic clues and always work both in light and dark theme.</p>
<H2>Semantic colors</H2>
<Text>These can be used to give semantic clues and always work both in light and dark theme.</Text>
<ColorVariants />
</>
)
@ -148,12 +161,11 @@ Colors.parameters = {
export const Layout: Story = () => (
<>
<Typography.H1>Layout</Typography.H1>
<H1>Layout</H1>
<Typography.H2>Spacing</Typography.H2>
<p>
Use margin <Typography.Code>m-*</Typography.Code> and padding <Typography.Code>p-*</Typography.Code>{' '}
utilities to align with the{' '}
<H2>Spacing</H2>
<Text>
Use margin <Code>m-*</Code> and padding <Code>p-*</Code> utilities to align with the{' '}
<Link
to="https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632"
target="_blank"
@ -161,12 +173,11 @@ export const Layout: Story = () => (
>
8pt grid
</Link>
. When hand-writing CSS, use <Typography.Code>rem</Typography.Code> units in multiples of{' '}
<Typography.Code>0.25</Typography.Code>.
</p>
. When hand-writing CSS, use <Code>rem</Code> units in multiples of <Code>0.25</Code>.
</Text>
<Typography.H2>One-dimensional layout</Typography.H2>
<p>
<H2>One-dimensional layout</H2>
<Text>
Use{' '}
<Link
to="https://css-tricks.com/snippets/css/a-guide-to-flexbox/"
@ -180,10 +191,10 @@ export const Layout: Story = () => (
utility classes
</Link>{' '}
for simple flexbox layouts.
</p>
</Text>
<Typography.H3>Row layout</Typography.H3>
<Typography.H4>Equally distributed</Typography.H4>
<H3>Row layout</H3>
<H4>Equally distributed</H4>
<div
className="d-flex p-1 border mb-2 overflow-hidden"
style={{ resize: 'both', minWidth: '16rem', minHeight: '3rem' }}
@ -193,7 +204,7 @@ export const Layout: Story = () => (
<div className="p-1 m-1 flex-grow-1 d-flex justify-content-center align-items-center border">Column 3</div>
</div>
<Typography.H4>Middle column growing</Typography.H4>
<H4>Middle column growing</H4>
<div
className="d-flex p-1 border mb-2 overflow-hidden"
style={{ resize: 'both', minWidth: '16rem', minHeight: '3rem' }}
@ -205,7 +216,7 @@ export const Layout: Story = () => (
<div className="p-1 m-1 d-flex justify-content-center align-items-center border border">Column 3</div>
</div>
<Typography.H3>Column layout</Typography.H3>
<H3>Column layout</H3>
<div
className="d-flex flex-column p-1 border mb-2 overflow-hidden"
style={{ minHeight: '8rem', height: '12rem', minWidth: '6rem', width: '12rem', resize: 'both' }}
@ -215,10 +226,10 @@ export const Layout: Story = () => (
<div className="p-1 m-1 flex-grow-1 border d-flex align-items-center justify-content-center">Row 3</div>
</div>
<Typography.H2>Two-dimensional layout</Typography.H2>
<p>
<H2>Two-dimensional layout</H2>
<Text>
Use <Link to="https://learncssgrid.com/">CSS Grid</Link> for complex two-dimensional layouts.
</p>
</Text>
<div
className="p-2 border overflow-hidden"
style={{
@ -248,25 +259,25 @@ export const ButtonGroups: Story = () => {
const buttonSizes: ButtonSizesType[] = ['lg', undefined, 'sm']
return (
<>
<Typography.H1>Button groups</Typography.H1>
<p>
<H1>Button groups</H1>
<Text>
Group a series of buttons together on a single line with the button group.{' '}
<Link to="https://getbootstrap.com/docs/4.5/components/buttons/">Bootstrap documentation</Link>
</p>
</Text>
<Typography.H2>Example</Typography.H2>
<H2>Example</H2>
<div className="mb-2">
<p>
<Text>
Button groups have no styles on their own, they just group buttons together. This means they can be
used to group any other semantic or outline button variant.
</p>
</Text>
<div className="mb-2">
<ButtonGroup aria-label="Basic example">
<Button variant="secondary">Left</Button>
<Button variant="secondary">Middle</Button>
<Button variant="secondary">Right</Button>
</ButtonGroup>{' '}
Example with <Typography.Code>btn-secondary</Typography.Code>
Example with <Code>btn-secondary</Code>
</div>
<div className="mb-2">
<ButtonGroup aria-label="Basic example">
@ -280,7 +291,7 @@ export const ButtonGroups: Story = () => {
Right
</Button>
</ButtonGroup>{' '}
Example with <Typography.Code>btn-outline-secondary</Typography.Code>
Example with <Code>btn-outline-secondary</Code>
</div>
<div className="mb-2">
<ButtonGroup aria-label="Basic example">
@ -294,15 +305,14 @@ export const ButtonGroups: Story = () => {
Right
</Button>
</ButtonGroup>{' '}
Example with <Typography.Code>btn-outline-primary</Typography.Code>
Example with <Code>btn-outline-primary</Code>
</div>
</div>
<Typography.H2 className="mt-3">Sizing</Typography.H2>
<p>
Just like buttons, button groups have <Typography.Code>sm</Typography.Code> and{' '}
<Typography.Code>lg</Typography.Code> size variants.
</p>
<H2 className="mt-3">Sizing</H2>
<Text>
Just like buttons, button groups have <Code>sm</Code> and <Code>lg</Code> size variants.
</Text>
<div className="mb-2">
{buttonSizes.map(size => (
<div key={size} className="mb-2">
@ -321,10 +331,10 @@ export const ButtonGroups: Story = () => {
))}
</div>
<Typography.H2 className="mt-3">Active state</Typography.H2>
<p>
The <Typography.Code>active</Typography.Code> class can be used to craft toggles out of button groups.
</p>
<H2 className="mt-3">Active state</H2>
<Text>
The <Code>active</Code> class can be used to craft toggles out of button groups.
</Text>
<div className="mb-2">
<ButtonGroup aria-label="Basic example">
{(['Left', 'Middle', 'Right'] as const).map(option => (
@ -340,7 +350,7 @@ export const ButtonGroups: Story = () => {
</Button>
))}
</ButtonGroup>{' '}
Example with <Typography.Code>btn-outline-secondary</Typography.Code>
Example with <Code>btn-outline-secondary</Code>
</div>
<div className="mb-2">
<ButtonGroup aria-label="Basic example">
@ -357,7 +367,7 @@ export const ButtonGroups: Story = () => {
</Button>
))}
</ButtonGroup>{' '}
Example with <Typography.Code>btn-outline-primary</Typography.Code>
Example with <Code>btn-outline-primary</Code>
</div>
</>
)
@ -376,15 +386,15 @@ ButtonGroups.parameters = {
export const InputGroups: Story = () => (
<>
<Typography.H1>Input groups</Typography.H1>
<H1>Input groups</H1>
<p>
<Text>
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs,
custom selects, and custom file inputs.{' '}
<Link to="https://getbootstrap.com/docs/4.5/components/input-group/">Bootstrap documentation</Link>
</p>
</Text>
<Typography.H2>Example</Typography.H2>
<H2>Example</H2>
<div>
<div className="input-group" style={{ maxWidth: '24rem' }}>
<input type="search" className="form-control" placeholder="Search code..." aria-label="Search query" />
@ -402,16 +412,16 @@ InputGroups.storyName = 'Input groups'
export const Forms: Story = () => (
<>
<Typography.H1>Forms</Typography.H1>
<p>
<H1>Forms</H1>
<Text>
Forms are validated using native HTML validation. Submit the below form with invalid input to try it out.{' '}
<Link to="https://getbootstrap.com/docs/4.5/components/forms/" target="_blank" rel="noopener noreferrer">
Bootstrap documentation
</Link>
</p>
</Text>
<Form onSubmit={preventDefault}>
<div className="form-group">
<Typography.Label htmlFor="example-email-input">Email address</Typography.Label>
<Label htmlFor="example-email-input">Email address</Label>
<input
type="email"
className="form-control"
@ -424,7 +434,7 @@ export const Forms: Story = () => (
</small>
</div>
<div className="form-group">
<Typography.Label htmlFor="example-input-password">Password</Typography.Label>
<Label htmlFor="example-input-password">Password</Label>
<input type="password" className="form-control" id="example-input-password" />
</div>
@ -445,11 +455,11 @@ export const Forms: Story = () => (
</Button>
</Form>
<Typography.H2 className="mt-3">Disabled</Typography.H2>
<H2 className="mt-3">Disabled</H2>
<Form>
<fieldset disabled={true}>
<div className="form-group">
<Typography.Label htmlFor="disabledTextInput">Disabled input</Typography.Label>
<Label htmlFor="disabledTextInput">Disabled input</Label>
<input type="text" id="disabledTextInput" className="form-control" placeholder="Disabled input" />
</div>
@ -471,11 +481,11 @@ export const Forms: Story = () => (
</fieldset>
</Form>
<Typography.H2 className="mt-3">Readonly</Typography.H2>
<H2 className="mt-3">Readonly</H2>
<input className="form-control" type="text" value="I'm a readonly value" readOnly={true} />
<Typography.H2 className="mt-3">Sizing</Typography.H2>
<p>Form fields can be made smaller</p>
<H2 className="mt-3">Sizing</H2>
<Text>Form fields can be made smaller</Text>
<div className="d-flex">
<fieldset>
<div className="form-group">
@ -494,7 +504,7 @@ export const Forms: Story = () => (
</div>
</fieldset>
</div>
<Typography.H2 className="mt-3">Field reference</Typography.H2>
<H2 className="mt-3">Field reference</H2>
<FormFieldVariants />
</>
)
@ -508,11 +518,11 @@ Forms.parameters = {
export const ListGroups: Story = () => (
<>
<Typography.H1>List groups</Typography.H1>
<p>
<H1>List groups</H1>
<Text>
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them
to support just about any content within.
</p>
</Text>
<ul className="list-group mb-3">
<li className="list-group-item">Cras justo odio</li>
<li className="list-group-item">Dapibus ac facilisis in</li>
@ -521,7 +531,7 @@ export const ListGroups: Story = () => (
<li className="list-group-item">Vestibulum at eros</li>
</ul>
<Typography.H2>Interactive</Typography.H2>
<H2>Interactive</H2>
<div className="list-group">
<button
type="button"
@ -576,37 +586,37 @@ export const Meter: Story = () => {
return (
<>
<Typography.H1>Meter</Typography.H1>
<p>
<H1>Meter</H1>
<Text>
The HTML{' '}
<Link
to="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter"
target="_blank"
rel="noopener noreferrer"
>
<Typography.Code>{'<meter>'}</Typography.Code>
<Code>{'<meter>'}</Code>
</Link>{' '}
element represents either a scalar value within a known range or a fractional value.
</p>
<Typography.H2>Examples</Typography.H2>
</Text>
<H2>Examples</H2>
<hr />
<div className="pb-3">
<Typography.H3>Optimum</Typography.H3>
<H3>Optimum</H3>
<meter min={0} max={1} optimum={1} value={1} />
</div>
<hr />
<div className="pb-3">
<Typography.H3>Sub optimum</Typography.H3>
<H3>Sub optimum</H3>
<meter min={0} max={1} high={0.8} low={0.2} optimum={1} value={0.6} />
</div>
<hr />
<div className="pb-3">
<Typography.H3>Sub sub optimum</Typography.H3>
<H3>Sub sub optimum</H3>
<meter min={0} max={1} high={0.8} low={0.2} optimum={1} value={0.1} />
</div>
<hr />
<div className="pb-3">
<Typography.H3>Customize with knobs</Typography.H3>
<H3>Customize with knobs</H3>
<meter min={min} max={max} high={high} low={low} optimum={optimum} value={value} />
</div>
</>

45
client/branded/src/global-styles/GlobalStylesStory/TextStory.tsx
View File

@ -1,7 +1,6 @@
import React from 'react'
import 'storybook-addon-designs'
import { Link, Typography } from '@sourcegraph/wildcard'
import { Link, Typography, Text } from '@sourcegraph/wildcard'
import { SEMANTIC_COLORS } from './constants'
import { TextVariants } from './TextVariants'
@ -32,8 +31,8 @@ export const TextStory: React.FunctionComponent<React.PropsWithChildren<unknown>
<TextVariants />
<Typography.H2>Prose</Typography.H2>
<p>Text uses system fonts. The fonts should never be overridden.</p>
<p>
<Text>Text uses system fonts. The fonts should never be overridden.</Text>
<Text>
Minim nisi tempor Lorem do incididunt exercitation ipsum consectetur laboris elit est aute irure velit.
Voluptate irure excepteur sint reprehenderit culpa laboris. Elit id nostrud enim laboris irure. Est sunt ex
ipisicing aute elit voluptate consectetur.Do laboris anim fugiat ipsum sunt elit sunt amet consequat trud
@ -44,17 +43,17 @@ export const TextStory: React.FunctionComponent<React.PropsWithChildren<unknown>
deserunt anim ad eiusmod quis quis laborum magna nisi occaecat. Eu is eiusmod sint aliquip duis est sit
irure velit reprehenderit id. Cillum est esse et nulla ut adipisicing velit anim id exercitation nostrud.
Duis veniam sit laboris tempor quis sit cupidatat elit.
</p>
</Text>
<p>
<Text>
Text can contain links, which <Link to="/">trigger a navigation to a different page</Link>.
</p>
</Text>
<p>
<Text>
Text can be <em>emphasized</em> or made <strong>strong</strong>.
</p>
</Text>
<p>
<Text>
Text can be <i>idiomatic</i> with <Typography.Code>{'<i>'}</Typography.Code>. See{' '}
<Link
target="__blank"
@ -63,30 +62,30 @@ export const TextStory: React.FunctionComponent<React.PropsWithChildren<unknown>
{'<i>'} vs. {'<em>'}
</Link>{' '}
for more info.
</p>
</Text>
<p>
<Text>
You can bring attention to the <b>element</b> with <Typography.Code>{'<b>'}</Typography.Code>.
</p>
</Text>
<p>
<Text>
Text can have superscripts<sup>sup</sup> with <Typography.Code>{'<sup>'}</Typography.Code>.
</p>
</Text>
<p>
<Text>
Text can have subscripts<sub>sub</sub> with <Typography.Code>{'<sub>'}</Typography.Code>.
</p>
</Text>
<p>
<Text>
<small>
You can use <Typography.Code>{'<small>'}</Typography.Code> to make small text. Use sparingly.
</small>
</p>
</Text>
<Typography.H2>Color variations</Typography.H2>
<p>
<Text>
<Typography.Code>text-*</Typography.Code> classes can be used to apply semantic coloring to text.
</p>
</Text>
<div className="mb-3">
{['muted', ...SEMANTIC_COLORS].map(color => (
<div key={color} className={'text-' + color}>
@ -134,9 +133,9 @@ export const TextStory: React.FunctionComponent<React.PropsWithChildren<unknown>
</ul>
<Typography.H4>Dashes</Typography.H4>
<p>
<Text>
Dashed lists are created using <Typography.Code>list-dashed</Typography.Code>.
</p>
</Text>
<ul className="list-dashed">
<li>
Ad deserunt amet Lorem in exercitation. Deserunt labore anim non minim. Dolor dolore adipisicing anim

10
client/branded/src/global-styles/GlobalStylesStory/TextVariants/TextVariants.tsx
View File

@ -2,7 +2,7 @@ import React, { ElementType } from 'react'
import classNames from 'classnames'
import { Typography } from '@sourcegraph/wildcard'
import { Typography, Text } from '@sourcegraph/wildcard'
import styles from './TextVariants.module.scss'
@ -68,12 +68,12 @@ export const TextVariants: React.FunctionComponent<React.PropsWithChildren<unkno
<td>Body Text</td>
<td>
{WEIGHT_VARIANTS.map(weight => (
<p key={`Base/${weight}`} className={styles.textVariant}>
<Text key={`Base/${weight}`} className={styles.textVariant}>
<TextLabel size="Base" name="Body" weight={weight} />
</p>
</Text>
))}
{WEIGHT_VARIANTS.map(weight => (
<p key={`Small/${weight}`} className={styles.textVariant}>
<Text key={`Small/${weight}`} className={styles.textVariant}>
<small>
<TextLabel
size="Small"
@ -82,7 +82,7 @@ export const TextVariants: React.FunctionComponent<React.PropsWithChildren<unkno
className={classNames({ 'font-weight-bold': weight === 'Strong' })}
/>
</small>
</p>
</Text>
))}
</td>
</tr>

32
client/browser/src/browser-extension/after-install-page/AfterInstallPageContent.tsx
View File

@ -12,7 +12,7 @@ import LockIcon from 'mdi-react/LockIcon'
import { SourcegraphLogo } from '@sourcegraph/branded/src/components/SourcegraphLogo'
import { PhabricatorIcon } from '@sourcegraph/shared/src/components/icons'
import { ThemeProps } from '@sourcegraph/shared/src/theme'
import { Link, Icon, Typography } from '@sourcegraph/wildcard'
import { Link, Icon, Typography, Text } from '@sourcegraph/wildcard'
import { getPlatformName } from '../../shared/util/context'
@ -67,7 +67,9 @@ export const AfterInstallPageContent: React.FunctionComponent<React.PropsWithChi
<div className="container mt-3">
<Typography.H1>🎉 You’ve just installed the Sourcegraph browser extension!</Typography.H1>
<p className="lead mb-0">We’ve gathered the most important information that will get your started:</p>
<Text className="lead mb-0">
We’ve gathered the most important information that will get your started:
</Text>
</div>
<section className="border-bottom py-5">
@ -76,20 +78,20 @@ export const AfterInstallPageContent: React.FunctionComponent<React.PropsWithChi
<div className="row">
<div className="col-md-6">
<Typography.H3>Code intelligence on your code host</Typography.H3>
<p>
<Text>
Sourcegraph browser extension adds code intelligence to files and diffs on GitHub,
GitHub Enterprise, GitLab, Phabricator, Bitbucket Server, and Gerrit.
</p>
</Text>
<Video {...props} name="CodeIntelligenceOnCodeHost" width={1760} height={1060} />
</div>
{showSearchShortcut && (
<div className="col-md-6 mt-4 mt-md-0">
<Typography.H3>Search shortcut in the URL location bar</Typography.H3>
<p>
<Text>
Type <Typography.Code>src</Typography.Code>
<kbd>tab</kbd> in the address bar of your browser to search for queries on
Sourcegraph.
</p>
</Text>
<Video {...props} name="BrowserShortcut" width={1196} height={720} />
</div>
)}
@ -112,10 +114,10 @@ export const AfterInstallPageContent: React.FunctionComponent<React.PropsWithChi
/>{' '}
github.com
</Typography.H3>
<p className="m-0">
<Text className="m-0">
<Icon role="img" as={CheckIcon} aria-hidden={true} /> No action required.Your
extension works here by default.
</p>
</Text>
</div>
<div className="bg-2 rounded p-3 d-flex flex-column justify-content-center">
<Typography.H3 className={classNames('d-flex flex-wrap', styles.codeHostTitles)}>
@ -156,7 +158,7 @@ export const AfterInstallPageContent: React.FunctionComponent<React.PropsWithChi
Phabricator
</div>
</Typography.H3>
<p>Your extension needs explicit permissions to your code host:</p>
<Text>Your extension needs explicit permissions to your code host:</Text>
<ol className="m-0">
<li>Navigate to any page on your code host.</li>
<li>
@ -188,18 +190,18 @@ export const AfterInstallPageContent: React.FunctionComponent<React.PropsWithChi
<div className="row">
<div className="col-md-6 d-flex flex-column">
<Typography.H2 className="mb-4">Make it work for private code</Typography.H2>
<p>By default, the browser extension works only for public code.</p>
<Text>By default, the browser extension works only for public code.</Text>
<div className="d-flex align-items-center">
<div className="bg-3 rounded-circle p-2">
<Icon role="img" as={LockIcon} aria-hidden={true} />
</div>
<p className="m-0 ml-3">
<Text className="m-0 ml-3">
To use the browser extension with your private repositories, you need to set up a{' '}
<strong>private Sourcegraph instance</strong> and connect the extension to it.
</p>
</Text>
</div>
<div className="bg-2 rounded p-3 mt-4 d-flex flex-column justify-content-around">
<p>Follow these instructions:</p>
<Text>Follow these instructions:</Text>
<ol className="m-0 d-flex flex-column justify-content-around">
<li>
<strong>Install Sourcegraph</strong> (
@ -241,7 +243,7 @@ export const AfterInstallPageContent: React.FunctionComponent<React.PropsWithChi
<div className="bg-3 rounded-circle p-2">
<Icon role="img" as={BookOpenPageVariantIcon} aria-hidden={true} />
</div>
<p className="m-0 ml-3">
<Text className="m-0 ml-3">
Read the{' '}
<Link
to="https://docs.sourcegraph.com/integration/browser_extension"
@ -251,7 +253,7 @@ export const AfterInstallPageContent: React.FunctionComponent<React.PropsWithChi
Sourcegraph docs
</Link>{' '}
to learn more about how we respect your privacy, troubleshooting and extension features.
</p>
</Text>
</div>
</div>
</section>

20
client/browser/src/browser-extension/options-menu/OptionsPage.tsx
View File

@ -16,7 +16,7 @@ import { Toggle } from '@sourcegraph/branded/src/components/Toggle'
import { IUser } from '@sourcegraph/shared/src/schema'
import { createURLWithUTM } from '@sourcegraph/shared/src/tracking/utm'
import { useInputValidation, deriveInputClassName } from '@sourcegraph/shared/src/util/useInputValidation'
import { Button, Link, Icon, Typography } from '@sourcegraph/wildcard'
import { Button, Link, Icon, Typography, Text } from '@sourcegraph/wildcard'
import { getPlatformName, isDefaultSourcegraphUrl } from '../../shared/util/context'
@ -119,9 +119,9 @@ export const OptionsPage: React.FunctionComponent<React.PropsWithChildren<Option
onChange={onChangeSourcegraphUrl}
validate={validateSourcegraphUrl}
/>
<p className="mt-2 mb-0">
<Text className="mt-2 mb-0">
<small>Enter the URL of your Sourcegraph instance to use the extension on private code.</small>
</p>
</Text>
</section>
{permissionAlert && (
@ -142,7 +142,7 @@ export const OptionsPage: React.FunctionComponent<React.PropsWithChildren<Option
>
<small>How do we keep your code private?</small> <OpenInNewIcon size="0.75rem" className="ml-2" />
</Link>
<p className="mb-0">
<Text className="mb-0">
<Button
className="p-0 shadow-none font-weight-normal test-toggle-advanced-settings-button"
onClick={toggleAdvancedSettings}
@ -151,7 +151,7 @@ export const OptionsPage: React.FunctionComponent<React.PropsWithChildren<Option
>
{showAdvancedSettings ? 'Hide' : 'Show'} advanced settings
</Button>
</p>
</Text>
{showAdvancedSettings && (
<OptionsPageAdvancedSettings optionFlags={optionFlags} onChangeOptionFlag={onChangeOptionFlag} />
)}
@ -189,9 +189,9 @@ const PermissionAlert: React.FunctionComponent<React.PropsWithChildren<Permissio
<Typography.H4>
{AlertIcon && <Icon role="img" className="mr-2" as={AlertIcon} aria-hidden={true} />} <span>{name}</span>
</Typography.H4>
<p className={styles.permissionText}>
<Text className={styles.permissionText}>
<strong>Grant permissions</strong> to use the Sourcegraph extension on {name}.
</p>
</Text>
<Button onClick={onClickGrantPermissions} variant="primary" size="sm">
<small>Grant permissions</small>
</Button>
@ -216,7 +216,7 @@ const RepoSyncErrorAlert: React.FunctionComponent<
<Icon role="img" aria-hidden={true} className="mr-2" as={isDefaultURL ? LockIcon : BlockHelperIcon} />
{isDefaultURL ? 'Private repository' : 'Repository not found'}
</Typography.H4>
<p className="mb-0">
<Text className="mb-0">
{isDefaultURL ? (
<>
<Link
@ -255,7 +255,7 @@ const RepoSyncErrorAlert: React.FunctionComponent<
) : (
<>Contact your admin to add this repository to Sourcegraph.</>
)}
</p>
</Text>
</section>
)
}
@ -266,7 +266,7 @@ const SourcegraphCloudAlert: React.FunctionComponent<React.PropsWithChildren<unk
<Icon role="img" aria-hidden={true} className="mr-2" as={CheckCircleOutlineIcon} />
You're on Sourcegraph Cloud
</Typography.H4>
<p>Naturally, the browser extension is not necessary to browse public code on sourcegraph.com.</p>
<Text>Naturally, the browser extension is not necessary to browse public code on sourcegraph.com.</Text>
</section>
)

5
client/search-ui/src/components/SyntaxHighlightedSearchQuery.story.tsx
View File

@ -1,6 +1,7 @@
import { storiesOf } from '@storybook/react'
import { BrandedStory } from '@sourcegraph/branded/src/components/BrandedStory'
import { Text } from '@sourcegraph/wildcard'
import { SyntaxHighlightedSearchQuery } from './SyntaxHighlightedSearchQuery'
@ -11,13 +12,13 @@ const { add } = storiesOf('search-ui/SyntaxHighlightedSearchQuery', module).addP
add('SyntaxHighlightedSearchQuery', () => (
<BrandedStory>
{() => (
<p>
<Text>
<SyntaxHighlightedSearchQuery query="test AND spec" />
<br />
<SyntaxHighlightedSearchQuery query="test or spec repo:sourcegraph" />
<br />
<SyntaxHighlightedSearchQuery query="test -lang:ts" />
</p>
</Text>
)}
</BrandedStory>
))

38
client/search-ui/src/results/NoResultsPage.tsx
View File

@ -12,7 +12,7 @@ import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary/
import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
import { ThemeProps } from '@sourcegraph/shared/src/theme'
import { buildSearchURLQuery } from '@sourcegraph/shared/src/util/url'
import { Button, Link, Icon, Typography } from '@sourcegraph/wildcard'
import { Button, Link, Icon, Typography, Text } from '@sourcegraph/wildcard'
import { ModalVideo } from '../documentation/ModalVideo'
@ -252,7 +252,7 @@ export const NoResultsPage: React.FunctionComponent<React.PropsWithChildren<NoRe
title="Search is literal by default"
onClose={onClose}
>
<p>
<Text>
If you type <Typography.Code>facebook react</Typography.Code>, we will search for file
names, file contents, repo names, etc. for the exact, ordered phrase{' '}
<Typography.Code>facebook react</Typography.Code>. If you add quotes around your search
@ -262,11 +262,11 @@ export const NoResultsPage: React.FunctionComponent<React.PropsWithChildren<NoRe
{'{'} url: "https://sourcegraph.com" {'}'}
</Typography.Code>{' '}
without escaping.
</p>
<p>
</Text>
<Text>
Try searching in regexp mode to match terms independently, similar to an AND search, but
term ordering is maintained.
</p>
</Text>
<SearchInputExample
showSearchContext={searchContextsEnabled && showSearchContext}
query="repo:sourcegraph const Authentication"
@ -281,7 +281,7 @@ export const NoResultsPage: React.FunctionComponent<React.PropsWithChildren<NoRe
{!hiddenSectionIDs?.includes(SectionID.COMMON_PROBLEMS) && (
<Container sectionID={SectionID.COMMON_PROBLEMS} title="Common Problems" onClose={onClose}>
<Typography.H4>Finding a specific repository</Typography.H4>
<p>Repositories are specified by their org/repository-name convention:</p>
<Text>Repositories are specified by their org/repository-name convention:</Text>
<SearchInputExample
showSearchContext={searchContextsEnabled && showSearchContext}
query="repo:sourcegraph/about lang:go publish"
@ -292,10 +292,10 @@ export const NoResultsPage: React.FunctionComponent<React.PropsWithChildren<NoRe
})
}
/>
<p>
<Text>
To search within all of an org’s repositories, specify only the org name and a trailing
slash:
</p>
</Text>
<SearchInputExample
showSearchContext={searchContextsEnabled && showSearchContext}
query="repo:sourcegraph/ lang:go publish"
@ -306,7 +306,7 @@ export const NoResultsPage: React.FunctionComponent<React.PropsWithChildren<NoRe
})
}
/>
<p>
<Text>
<small>
<Link
target="blank"
@ -315,10 +315,10 @@ export const NoResultsPage: React.FunctionComponent<React.PropsWithChildren<NoRe
Learn more <Icon role="img" aria-hidden={true} as={ExternalLinkIcon} />
</Link>
</small>
</p>
</Text>
<Typography.H4>AND, OR, NOT</Typography.H4>
<p>Conditionals and grouping are possible within queries:</p>
<Text>Conditionals and grouping are possible within queries:</Text>
<SearchInputExample
showSearchContext={searchContextsEnabled && showSearchContext}
query="repo:sourcegraph/ (lang:typescript OR lang:go) auth"
@ -327,10 +327,10 @@ export const NoResultsPage: React.FunctionComponent<React.PropsWithChildren<NoRe
/>
<Typography.H4>Escaping</Typography.H4>
<p>
<Text>
Because our default mode is literal, escaping requires a dedicated filter. Use the
content filter to include spaces and filter keywords in searches.
</p>
</Text>
<SearchInputExample
showSearchContext={searchContextsEnabled && showSearchContext}
query={'content:"class Vector"'}
@ -341,11 +341,11 @@ export const NoResultsPage: React.FunctionComponent<React.PropsWithChildren<NoRe
)}
<Container title="More resources">
<p>
<Text>
Check out the learn site, including the cheat sheet for more tips on getting the most from
Sourcegraph.
</p>
<p>
</Text>
<Text>
<Link
onClick={() => telemetryService.log('NoResultsMore', { link: 'Learn site' })}
target="blank"
@ -361,11 +361,11 @@ export const NoResultsPage: React.FunctionComponent<React.PropsWithChildren<NoRe
>
Sourcegraph cheat sheet <Icon role="img" aria-hidden={true} as={ExternalLinkIcon} />
</Link>
</p>
</Text>
</Container>
{hiddenSectionIDs && hiddenSectionIDs.length > 0 && (
<p>
<Text>
Some help panels are hidden.{' '}
<Button
className="p-0 border-0 align-baseline"
@ -377,7 +377,7 @@ export const NoResultsPage: React.FunctionComponent<React.PropsWithChildren<NoRe
>
Show all panels.
</Button>
</p>
</Text>
)}
</div>
</div>

10
client/search-ui/src/results/StreamingSearchResultsFooter.tsx
View File

@ -4,7 +4,7 @@ import classNames from 'classnames'
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
import { AggregateStreamingSearchResults } from '@sourcegraph/shared/src/search/stream'
import { Alert, LoadingSpinner, Typography } from '@sourcegraph/wildcard'
import { Alert, LoadingSpinner, Typography, Text } from '@sourcegraph/wildcard'
import { StreamingProgressCount } from './progress/StreamingProgressCount'
@ -34,21 +34,21 @@ export const StreamingSearchResultFooter: React.FunctionComponent<
{results?.state === 'complete' && !results.alert && results?.results.length === 0 && (
<div className="pr-3 mt-3 align-self-stretch">
<Alert variant="info">
<p className="m-0">
<Text className="m-0">
<strong>No results matched your query</strong>
<br />
Use the tips below to improve your query.
</p>
</Text>
</Alert>
</div>
)}
{results?.state === 'complete' && results.progress.skipped.some(skipped => skipped.reason.includes('-limit')) && (
<Alert className="d-flex m-3" variant="info">
<p className="m-0">
<Text className="m-0">
<strong>Result limit hit.</strong> Modify your search with <Typography.Code>count:</Typography.Code>{' '}
to return additional items.
</p>
</Text>
</Alert>
)}

17
client/search-ui/src/results/sidebar/SearchReference.tsx
View File

@ -32,6 +32,7 @@ import {
CollapseHeader,
CollapsePanel,
Icon,
Text,
} from '@sourcegraph/wildcard'
import styles from './SearchReference.module.scss'
@ -439,16 +440,16 @@ const SearchReferenceEntry = <T extends SearchReferenceInfo>({
<Markdown dangerousInnerHTML={renderMarkdown(searchReference.description)} />
)}
{searchReference.alias && (
<p>
<Text>
Alias:{' '}
<span className="text-code search-filter-keyword">
{searchReference.alias}
{isFilterInfo(searchReference) ? ':' : ''}
</span>
</p>
</Text>
)}
{isFilterInfo(searchReference) && isNegatableFilter(searchReference.field) && (
<p>
<Text>
Negation:{' '}
<span className="test-code search-filter-keyword">-{searchReference.field}:</span>
{searchReference.alias && (
@ -462,16 +463,16 @@ const SearchReferenceEntry = <T extends SearchReferenceInfo>({
)}
<br />
<span className={styles.placeholder}>(opt + click filter in reference list)</span>
</p>
</Text>
)}
{searchReference.examples && (
<>
<div className="font-weight-medium">Examples</div>
<div className={classNames('text-code', styles.examples)}>
{searchReference.examples.map(example => (
<p key={example}>
<Text key={example}>
<SearchReferenceExample example={example} onClick={onExampleClick} />
</p>
</Text>
))}
</div>
</>
@ -599,13 +600,13 @@ const SearchReference = React.memo(
</TabPanels>
</Tabs>
)}
<p className={sidebarStyles.sidebarSectionFooter}>
<Text className={sidebarStyles.sidebarSectionFooter}>
<small>
<Link target="blank" to="https://docs.sourcegraph.com/code_search/reference/queries">
Search syntax <Icon role="img" aria-hidden={true} as={ExternalLinkIcon} />
</Link>
</small>
</p>
</Text>
</div>
)
}

10
client/shared/src/commandPalette/EmptyCommandList.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import { ButtonLink } from '@sourcegraph/wildcard'
import { ButtonLink, Text } from '@sourcegraph/wildcard'
import { onlyDefaultExtensionsAdded } from '../extensions/extensions'
import { SettingsCascadeOrError } from '../settings/settings'
@ -23,14 +23,14 @@ export const EmptyCommandList: React.FunctionComponent<React.PropsWithChildren<P
return (
<EmptyCommandListContainer>
<p className={styles.title}>
<Text className={styles.title}>
{onlyDefault ? "You don't have any extensions enabled" : "You don't have any active actions"}
</p>
<p className={styles.text}>
</Text>
<Text className={styles.text}>
{onlyDefault
? 'Enable Sourcegraph extensions to get additional functionality, integrations, and make special actions available from this menu.'
: 'Commands from your installed extensions will be shown when you navigate to certain pages.'}
</p>
</Text>
<ButtonLink to={sourcegraphURL + '/extensions'} variant="primary">
Explore extensions

9
client/shared/src/extensions/devtools/ActiveExtensionsPanel.tsx
View File

@ -13,6 +13,7 @@ import {
CardBody,
Alert,
Typography,
Text,
} from '@sourcegraph/wildcard'
import { wrapRemoteObservable } from '../../api/client/api/common'
@ -77,10 +78,10 @@ export const ActiveExtensionsPanel: React.FunctionComponent<
<Typography.H4>Sideload extension</Typography.H4>
{sideloadedExtensionURL ? (
<div>
<p>
<Text>
<span>Load from: </span>
<Link to={sideloadedExtensionURL}>{sideloadedExtensionURL}</Link>
</p>
</Text>
<div>
<Button className="mr-1" onClick={setSideloadedExtensionURL} variant="primary" size="sm">
Change
@ -92,9 +93,9 @@ export const ActiveExtensionsPanel: React.FunctionComponent<
</div>
) : (
<div>
<p>
<Text>
<span>No sideloaded extension</span>
</p>
</Text>
<div>
<Button onClick={setSideloadedExtensionURL} variant="primary" size="sm">
Load extension

4
client/shared/src/hover/HoverOverlayContents/HoverOverlayContent/HoverOverlayContent.tsx
View File

@ -5,7 +5,7 @@ import { upperFirst } from 'lodash'
import { HoverMerged } from '@sourcegraph/client-api'
import { asError, renderMarkdown } from '@sourcegraph/common'
import { Alert, AlertProps, Badge } from '@sourcegraph/wildcard'
import { Alert, AlertProps, Badge, Text } from '@sourcegraph/wildcard'
import hoverOverlayStyle from '../../HoverOverlay.module.scss'
import hoverOverlayContentsStyle from '../../HoverOverlayContents.module.scss'
@ -44,7 +44,7 @@ export const HoverOverlayContent: React.FunctionComponent<
data-testid="hover-overlay-content"
className={classNames(style.hoverOverlayContent, hoverOverlayContentsStyle.hoverOverlayContent)}
>
<p>{content.value}</p>
<Text>{content.value}</Text>
</span>
)
}

4
client/vscode/src/webview/search-panel/RepoView.tsx
View File

@ -12,7 +12,7 @@ import { QueryState } from '@sourcegraph/search'
import { fetchTreeEntries } from '@sourcegraph/shared/src/backend/repo'
import { displayRepoName } from '@sourcegraph/shared/src/components/RepoLink'
import { RepositoryMatch } from '@sourcegraph/shared/src/search/stream'
import { Icon, PageHeader, useObservable, Typography } from '@sourcegraph/wildcard'
import { Icon, PageHeader, useObservable, Typography, Text } from '@sourcegraph/wildcard'
import { WebviewPageProps } from '../platform/context'
@ -103,7 +103,7 @@ export const RepoView: React.FunctionComponent<React.PropsWithChildren<RepoViewP
path={[{ icon: SourceRepositoryIcon, text: displayRepoName(repositoryMatch.repository) }]}
className="mb-1 mt-3 test-tree-page-title"
/>
{repositoryMatch.description && <p className="mt-0 text-muted">{repositoryMatch.description}</p>}
{repositoryMatch.description && <Text className="mt-0 text-muted">{repositoryMatch.description}</Text>}
<div className={classNames(styles.section)}>
<Typography.H4>Files and directories</Typography.H4>
{treeEntries === undefined ? (

2
client/vscode/src/webview/search-panel/components/HomeFooter.tsx
View File

@ -62,7 +62,7 @@ const SearchExamples: React.FunctionComponent<React.PropsWithChildren<SearchExam
</div>
</div>
</button>
<p className={styles.searchExampleLabel}>{example.label}</p>
<Text className={styles.searchExampleLabel}>{example.label}</Text>
</div>
))}
</div>

48
client/vscode/src/webview/sidebars/auth/AuthSidebarView.tsx
View File

@ -7,7 +7,7 @@ import { Form } from '@sourcegraph/branded/src/components/Form'
import { LoaderInput } from '@sourcegraph/branded/src/components/LoaderInput'
import { currentAuthStateQuery } from '@sourcegraph/shared/src/auth'
import { CurrentAuthStateResult, CurrentAuthStateVariables } from '@sourcegraph/shared/src/graphql-operations'
import { Alert, Typography, Link } from '@sourcegraph/wildcard'
import { Alert, Typography, Text, Link } from '@sourcegraph/wildcard'
import {
VSCE_LINK_DOTCOM,
@ -141,15 +141,15 @@ export const AuthSidebarView: React.FunctionComponent<React.PropsWithChildren<Au
if (!hasAccount && !accessToken) {
return renderCommon(
<>
<p className={classNames(styles.ctaParagraph)}>
<Text className={classNames(styles.ctaParagraph)}>
Create an account to search across your private repositories and access advanced features: search
multiple repositories & commit history, monitor code changes, save searches, and more.
</p>
<p className={classNames(styles.ctaButtonWrapperWithContextBelow)}>
</Text>
<Text className={classNames(styles.ctaButtonWrapperWithContextBelow)}>
<VSCodeLink onClick={onSignUpClick} href={signUpURL}>
Create an account
</VSCodeLink>
</p>
</Text>
<VSCodeLink onClick={() => setHasAccount(true)}>Have an account?</VSCodeLink>
</>
)
@ -157,10 +157,10 @@ export const AuthSidebarView: React.FunctionComponent<React.PropsWithChildren<Au
return renderCommon(
<>
<p className={classNames(styles.ctaParagraph)}>
<Text className={classNames(styles.ctaParagraph)}>
Sign in by entering an access token created through your user settings on {hostname}.
</p>
<p className={classNames(styles.ctaParagraph)}>
</Text>
<Text className={classNames(styles.ctaParagraph)}>
See our {/* eslint-disable-next-line react/forbid-elements */}{' '}
<a
href={VSCE_LINK_USER_DOCS}
@ -169,9 +169,9 @@ export const AuthSidebarView: React.FunctionComponent<React.PropsWithChildren<Au
user docs
</a>{' '}
for a video guide on how to create an access token.
</p>
</Text>
{isSourcegraphDotCom && (
<p className={classNames(styles.ctaParagraph)}>
<Text className={classNames(styles.ctaParagraph)}>
<Link to={isSourcegraphDotCom}>
<VSCodeButton
type="button"
@ -185,9 +185,9 @@ export const AuthSidebarView: React.FunctionComponent<React.PropsWithChildren<Au
Continue in browser
</VSCodeButton>
</Link>
</p>
</Text>
)}
<p className={classNames(styles.ctaButtonWrapperWithContextBelow)}>
<Text className={classNames(styles.ctaButtonWrapperWithContextBelow)}>
<LoaderInput loading={state === 'validating'}>
<Typography.Label htmlFor="access-token-input">Access Token</Typography.Label>
<input
@ -204,9 +204,9 @@ export const AuthSidebarView: React.FunctionComponent<React.PropsWithChildren<Au
placeholder="ex 6dfc880b320dff712d9f6cfcac5cbd13ebfad1d8"
/>
</LoaderInput>
</p>
</Text>
{usePrivateInstance && (
<p className={classNames(styles.ctaButtonWrapperWithContextBelow)}>
<Text className={classNames(styles.ctaButtonWrapperWithContextBelow)}>
<LoaderInput loading={state === 'validating'}>
<Typography.Label htmlFor="instance-url-input">Sourcegraph Instance URL</Typography.Label>
<input
@ -223,7 +223,7 @@ export const AuthSidebarView: React.FunctionComponent<React.PropsWithChildren<Au
placeholder="ex https://sourcegraph.example.com"
/>
</LoaderInput>
</p>
</Text>
)}
<VSCodeButton
type="submit"
@ -238,16 +238,16 @@ export const AuthSidebarView: React.FunctionComponent<React.PropsWithChildren<Au
restart VS Code if the instance URL has been updated.
</Alert>
)}
<p className="my-0">
<Text className="my-0">
<VSCodeLink onClick={() => setUsePrivateInstance(!usePrivateInstance)}>
{!usePrivateInstance ? 'Need to connect to a private instance?' : 'Not a private instance user?'}
</VSCodeLink>
</p>
<p className="my-0">
</Text>
<Text className="my-0">
<VSCodeLink href={signUpURL} onClick={onSignUpClick}>
Create an account
</VSCodeLink>
</p>
</Text>
</>
)
}
@ -263,16 +263,16 @@ export const AuthSidebarCta: React.FunctionComponent<React.PropsWithChildren<Aut
<button type="button" className={classNames('btn btn-outline-secondary', styles.ctaTitle)}>
<Typography.H5 className="flex-grow-1">Welcome</Typography.H5>
</button>
<p className={classNames(styles.ctaParagraph)}>
<Text className={classNames(styles.ctaParagraph)}>
The Sourcegraph extension allows you to search millions of open source repositories without cloning them
to your local machine.
</p>
<p className={classNames(styles.ctaParagraph)}>
</Text>
<Text className={classNames(styles.ctaParagraph)}>
Developers use Sourcegraph every day to onboard to new code bases, find code to reuse, resolve
incidents, fix security vulnerabilities, and more.
</p>
</Text>
<div className={classNames(styles.ctaParagraph)}>
<p className="mb-0">Learn more:</p>
<Text className="mb-0">Learn more:</Text>
<VSCodeLink href={VSCE_LINK_DOTCOM + VSCE_SIDEBAR_PARAMS} onClick={() => onLinkClick('Sourcegraph')}>
Sourcegraph.com
</VSCodeLink>

4
client/vscode/src/webview/sidebars/help/HelpSidebarView.tsx
View File

@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react'
import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'
import classNames from 'classnames'
import { Text } from '@sourcegraph/wildcard'
import { version } from '../../../../package.json'
import {
VSCE_LINK_FEEDBACK,
@ -103,7 +105,7 @@ export const HelpSidebarView: React.FunctionComponent<React.PropsWithChildren<He
authenticatedUser={authenticatedUser}
/>
) : (
<p className="ml-2">Connected to {new URL(instanceURL).hostname}</p>
<Text className="ml-2">Connected to {new URL(instanceURL).hostname}</Text>
)}
</div>
)}

4
client/vscode/src/webview/sidebars/search/ContextInvalidatedSidebarView.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import { Button, Typography } from '@sourcegraph/wildcard'
import { Button, Typography, Text } from '@sourcegraph/wildcard'
import { WebviewPageProps } from '../../platform/context'
@ -11,7 +11,7 @@ export const ContextInvalidatedSidebarView: React.FunctionComponent<
> = ({ extensionCoreAPI }) => (
<div>
<Typography.H5 className="mt-3 mb-2">Your Sourcegraph instance URL has changed.</Typography.H5>
<p>Please reload VS Code to use to Sourcegraph extension.</p>
<Text>Please reload VS Code to use to Sourcegraph extension.</Text>
<Button
variant="primary"
className="font-weight-normal w-100 my-1 border-0"

8
client/web/src/auth/PostSignUpPage.tsx
View File

@ -6,7 +6,7 @@ import { useLocation, useHistory } from 'react-router'
import { ErrorLike } from '@sourcegraph/common'
import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary/useTemporarySetting'
import { TelemetryService } from '@sourcegraph/shared/src/telemetry/telemetryService'
import { Alert, Link, Typography } from '@sourcegraph/wildcard'
import { Alert, Link, Typography, Text } from '@sourcegraph/wildcard'
import { AuthenticatedUser } from '../auth'
import { BrandLogo } from '../components/branding/BrandLogo'
@ -144,7 +144,7 @@ export const PostSignUpPage: FunctionComponent<React.PropsWithChildren<PostSignU
</Alert>
)}
<Typography.H2>Get started with Sourcegraph</Typography.H2>
<p className="text-muted pb-3">Follow these steps to set up your account</p>
<Text className="text-muted pb-3">Follow these steps to set up your account</Text>
</div>
<div className="mt-2 pb-3 d-flex flex-column align-items-center w-100">
<Steps initialStep={debug ? parseInt(debug, 10) : 1} totalSteps={3}>
@ -173,7 +173,7 @@ export const PostSignUpPage: FunctionComponent<React.PropsWithChildren<PostSignU
<StepPanel>
<div className={classNames('mt-3', styles.container)}>
<Typography.H3>Add repositories</Typography.H3>
<p className="text-muted mb-4">
<Text className="text-muted mb-4">
Choose repositories you own or collaborate on from your code hosts.
We’ll sync and index these repositories so you can search your code
all in one place.
@ -185,7 +185,7 @@ export const PostSignUpPage: FunctionComponent<React.PropsWithChildren<PostSignU
{' '}
Learn more
</Link>
</p>
</Text>
<SelectAffiliatedRepos
authenticatedUser={user}
onRepoSelectionModeChange={setRepoSelectionMode}

12
client/web/src/auth/ResetPasswordPage.tsx
View File

@ -7,7 +7,7 @@ import { RouteComponentProps } from 'react-router-dom'
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
import { Form } from '@sourcegraph/branded/src/components/Form'
import { asError, ErrorLike, isErrorLike } from '@sourcegraph/common'
import { Button, Link, LoadingSpinner, Alert } from '@sourcegraph/wildcard'
import { Button, Link, LoadingSpinner, Alert, Text } from '@sourcegraph/wildcard'
import { AuthenticatedUser } from '../auth'
import { HeroPage } from '../components/HeroPage'
@ -53,7 +53,9 @@ class ResetPasswordInitForm extends React.PureComponent<ResetPasswordInitFormPro
className={classNames('border rounded p-4 mb-3', signInSignUpCommonStyles.signinSignupForm)}
data-testid="reset-password-page-form"
>
<p className="text-left mb-0">Check your email for a link to reset your password.</p>
<Text alignment="left" className="mb-0">
Check your email for a link to reset your password.
</Text>
</div>
<span className="form-text text-muted">
<Link to="/sign-in">Return to sign in</Link>
@ -76,9 +78,9 @@ class ResetPasswordInitForm extends React.PureComponent<ResetPasswordInitFormPro
data-testid="reset-password-page-form"
onSubmit={this.handleSubmitResetPasswordInit}
>
<p className="text-left">
<Text alignment="left">
Enter your account email address and we will send you a password reset link
</p>
</Text>
<div className="form-group">
<input
className="form-control"
@ -192,7 +194,7 @@ class ResetPasswordCodeForm extends React.PureComponent<ResetPasswordCodeFormPro
data-testid="reset-password-page-form"
onSubmit={this.handleSubmitResetPassword}
>
<p className="text-left">Enter a new password for your account.</p>
<Text alignment="left">Enter a new password for your account.</Text>
<div className="form-group">
<PasswordInput
name="password"

8
client/web/src/auth/SignInPage.tsx
View File

@ -8,7 +8,7 @@ import GitlabIcon from 'mdi-react/GitlabIcon'
import { Redirect } from 'react-router-dom'
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
import { Button, Link, Alert, Icon } from '@sourcegraph/wildcard'
import { Button, Link, Alert, Icon, Text } from '@sourcegraph/wildcard'
import { AuthenticatedUser } from '../auth'
import { HeroPage } from '../components/HeroPage'
@ -98,11 +98,11 @@ export const SignInPage: React.FunctionComponent<React.PropsWithChildren<SignInP
))}
</div>
{props.context.allowSignup ? (
<p>
<Text>
New to Sourcegraph? <Link to={`/sign-up${location.search}`}>Sign up</Link>
</p>
</Text>
) : (
<p className="text-muted">Need an account? Contact your site admin</p>
<Text className="text-muted">Need an account? Contact your site admin</Text>
)}
</div>
)

6
client/web/src/auth/SignUpForm.tsx
View File

@ -17,7 +17,7 @@ import {
ValidationOptions,
deriveInputClassName,
} from '@sourcegraph/shared/src/util/useInputValidation'
import { Button, Link, Icon, Checkbox, Typography } from '@sourcegraph/wildcard'
import { Button, Link, Icon, Checkbox, Typography, Text } from '@sourcegraph/wildcard'
import { LoaderButton } from '../components/LoaderButton'
import { AuthProvider, SourcegraphContext } from '../jscontext'
@ -327,7 +327,7 @@ export const SignUpForm: React.FunctionComponent<React.PropsWithChildren<SignUpF
)}
{!experimental && (
<p className="mt-3 mb-0">
<Text className="mt-3 mb-0">
<small className="form-text text-muted">
By signing up, you agree to our{' '}
<Link to="https://about.sourcegraph.com/terms" target="_blank" rel="noopener">
@ -339,7 +339,7 @@ export const SignUpForm: React.FunctionComponent<React.PropsWithChildren<SignUpF
</Link>
.
</small>
</p>
</Text>
)}
</form>
</>

10
client/web/src/auth/SignUpPage.tsx
View File

@ -5,7 +5,7 @@ import { Redirect, useLocation } from 'react-router-dom'
import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
import { ThemeProps } from '@sourcegraph/shared/src/theme'
import { Link } from '@sourcegraph/wildcard'
import { Link, Text } from '@sourcegraph/wildcard'
import { AuthenticatedUser } from '../auth'
import { HeroPage } from '../components/HeroPage'
@ -131,11 +131,13 @@ export const SignUpPage: React.FunctionComponent<React.PropsWithChildren<SignUpP
lessPadding={true}
body={
<div className={classNames('pb-5', signInSignUpCommonStyles.signupPageContainer)}>
{context.sourcegraphDotComMode && <p className="pt-1 pb-2">Start searching public code now</p>}
{context.sourcegraphDotComMode && (
<Text className="pt-1 pb-2">Start searching public code now</Text>
)}
<SignUpForm context={context} onSignUp={handleSignUp} />
<p className="mt-3">
<Text className="mt-3">
Already have an account? <Link to={`/sign-in${location.search}`}>Sign in</Link>
</p>
</Text>
</div>
}
/>

10
client/web/src/auth/TosConsentModal.tsx
View File

@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react'
import { gql, useMutation } from '@apollo/client'
import { Link, Alert, AnchorLink, Checkbox, Typography } from '@sourcegraph/wildcard'
import { Link, Alert, AnchorLink, Checkbox, Typography, Text } from '@sourcegraph/wildcard'
import { LoaderButton } from '../components/LoaderButton'
@ -48,10 +48,10 @@ export const TosConsentModal: React.FunctionComponent<React.PropsWithChildren<{
<SourcegraphIcon className={styles.icon} />
<div className={styles.content}>
<Typography.H1>We respect your data privacy</Typography.H1>
<p className="mb-5">
<Text className="mb-5">
We take data privacy seriously. We collect only what we need to provide a great experience, and we
never have access to your private data or code.
</p>
</Text>
{/* eslint-disable-next-line react/forbid-elements */}
<form onSubmit={onSubmit}>
<div className="form-group">
@ -82,10 +82,10 @@ export const TosConsentModal: React.FunctionComponent<React.PropsWithChildren<{
variant="primary"
/>
</form>
<p className="mt-5">
<Text className="mt-5">
If you do not agree, <AnchorLink to="/-/sign-out">sign out</AnchorLink> and contact your site admin
to have your account deleted.
</p>
</Text>
{error && (
<Alert className="mt-4" variant="danger">
Error accepting Terms of Service: {error.message}

8
client/web/src/auth/__snapshots__/SignInPage.test.tsx.snap
View File

@ -150,7 +150,9 @@ exports[`SignInPage renders sign in page (cloud) 1`] = `
</a>
</div>
</div>
<p>
<p
class=""
>
New to Sourcegraph?
<a
class="anchorLink"
@ -308,7 +310,9 @@ exports[`SignInPage renders sign in page (server) 1`] = `
</a>
</div>
</div>
<p>
<p
class=""
>
New to Sourcegraph?
<a
class="anchorLink"

6
client/web/src/auth/welcome/CodeHostsConnection.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect } from 'react'
import { ErrorLike } from '@sourcegraph/common'
import { LoadingSpinner, Typography } from '@sourcegraph/wildcard'
import { LoadingSpinner, Typography, Text } from '@sourcegraph/wildcard'
import { ListExternalServiceFields } from '../../graphql-operations'
import { UserCodeHosts } from '../../user/settings/codeHosts/UserCodeHosts'
@ -47,10 +47,10 @@ export const CodeHostsConnection: React.FunctionComponent<React.PropsWithChildre
<>
<div className="mb-4 mt-3">
<Typography.H3>Connect with code hosts</Typography.H3>
<p className="text-muted">
<Text className="text-muted">
Connect with providers where your source code is hosted. Then, choose the repositories you’d like to
search with Sourcegraph.
</p>
</Text>
</div>
<UserCodeHosts
user={user}

6
client/web/src/auth/welcome/InviteCollaborators/ActivityPane.tsx
View File

@ -4,7 +4,7 @@ import { ApolloError } from '@apollo/client'
import classNames from 'classnames'
import { ErrorLike, isErrorLike } from '@sourcegraph/common'
import { Link, Alert, Typography } from '@sourcegraph/wildcard'
import { Link, Alert, Typography, Text } from '@sourcegraph/wildcard'
import { PageRoutes } from '../../../routes.constants'
import { eventLogger } from '../../../tracking/eventLogger'
@ -77,9 +77,9 @@ export const ActivityPane: React.FunctionComponent<React.PropsWithChildren<Props
<div className={classNames(className, 'mx-2')}>
<div className={styles.titleDescription}>
<Typography.H3>Fetching repositories...</Typography.H3>
<p className="text-muted mb-4">
<Text className="text-muted mb-4">
We’re cloning your repos to Sourcegraph. In just a few moments, you can make your first search!
</p>
</Text>
</div>
<div className="border overflow-hidden rounded">
<header>

6
client/web/src/auth/welcome/InviteCollaborators/InvitePane.tsx
View File

@ -6,7 +6,7 @@ import CheckCircleIcon from 'mdi-react/CheckCircleIcon'
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
import { Form } from '@sourcegraph/branded/src/components/Form'
import { ErrorLike, isErrorLike } from '@sourcegraph/common'
import { LoadingSpinner, Button, Link, Icon, Typography } from '@sourcegraph/wildcard'
import { LoadingSpinner, Button, Link, Icon, Typography, Text } from '@sourcegraph/wildcard'
import { AuthenticatedUser } from '../../../auth'
import { CopyableText } from '../../../components/CopyableText'
@ -110,11 +110,11 @@ export const InvitePane: React.FunctionComponent<React.PropsWithChildren<Props>>
<div className={classNames(className, 'mx-2')}>
<div className={styles.titleDescription}>
<Typography.H3>Introduce friends and colleagues to Sourcegraph</Typography.H3>
<p className="text-muted mb-4">
<Text className="text-muted mb-4">
We’ll look for a few collaborators you might want to invite to Sourcegraph. These users won’t be
able to see your code unless they have access to it on the code host and also add that code to
Sourcegraph.
</p>
</Text>
</div>
{isErrorLike(inviteError) && <ErrorAlert error={inviteError} />}
<div className="border overflow-hidden rounded">

25
client/web/src/codeintel/ReferencesPanel.tsx
View File

@ -47,6 +47,7 @@ import {
CollapseHeader,
CollapsePanel,
Typography,
Text,
} from '@sourcegraph/wildcard'
import { ReferencesPanelHighlightedBlobResult, ReferencesPanelHighlightedBlobVariables } from '../graphql-operations'
@ -188,7 +189,7 @@ const SearchTokenFindingReferencesList: React.FunctionComponent<
if (!tokenResult?.searchToken) {
return (
<div>
<p className="text-danger">Could not find hovered token.</p>
<Text className="text-danger">Could not find hovered token.</Text>
</div>
)
}
@ -552,7 +553,7 @@ const CollapsibleLocationList: React.FunctionComponent<
isOpen={id => props.isOpen(props.name + id)}
/>
) : (
<p className="text-muted pl-2">
<Text className="text-muted pl-2">
{props.filter ? (
<i>
No {props.name} matching <strong>{props.filter}</strong> found
@ -560,7 +561,7 @@ const CollapsibleLocationList: React.FunctionComponent<
) : (
<i>No {props.name} found</i>
)}
</p>
</Text>
)}
{props.hasMore &&
@ -614,11 +615,11 @@ const SideBlob: React.FunctionComponent<
return (
<>
<LoadingSpinner inline={false} className="mx-auto my-4" />
<p className="text-muted text-center">
<Text alignment="center" className="text-muted">
<i>
Loading <Typography.Code>{props.activeLocation.file}</Typography.Code>...
</i>
</p>
</Text>
</>
)
}
@ -627,9 +628,9 @@ const SideBlob: React.FunctionComponent<
if (error && !data) {
return (
<div>
<p className="text-danger">
<Text className="text-danger">
Loading <Typography.Code>{props.activeLocation.file}</Typography.Code> failed:
</p>
</Text>
<pre>{error.message}</pre>
</div>
)
@ -643,11 +644,11 @@ const SideBlob: React.FunctionComponent<
const { html, aborted } = data?.repository?.commit?.blob?.highlight
if (aborted) {
return (
<p className="text-warning text-center">
<Text alignment="center" className="text-warning">
<i>
Highlighting <Typography.Code>{props.activeLocation.file}</Typography.Code> failed
</i>
</p>
</Text>
)
}
@ -942,16 +943,16 @@ const getPrePostLineContent = (location: Location): LocationLine => {
const LoadingCodeIntel: React.FunctionComponent<React.PropsWithChildren<{}>> = () => (
<>
<LoadingSpinner inline={false} className="mx-auto my-4" />
<p className="text-muted text-center">
<Text alignment="center" className="text-muted">
<i>Loading code intel ...</i>
</p>
</Text>
</>
)
const LoadingCodeIntelFailed: React.FunctionComponent<React.PropsWithChildren<{ error: ErrorLike }>> = props => (
<>
<div>
<p className="text-danger">Loading code intel failed:</p>
<Text className="text-danger">Loading code intel failed:</Text>
<pre>{props.error.message}</pre>
</div>
</>

12
client/web/src/communitySearchContexts/CommunitySearchContextPage.tsx
View File

@ -19,7 +19,7 @@ import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
import { SettingsCascadeProps, Settings } from '@sourcegraph/shared/src/settings/settings'
import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
import { ThemeProps } from '@sourcegraph/shared/src/theme'
import { Button, useObservable, Link, Card, Icon, Typography } from '@sourcegraph/wildcard'
import { Button, useObservable, Link, Card, Icon, Typography, Text } from '@sourcegraph/wildcard'
import { AuthenticatedUser } from '../auth'
import { PageTitle } from '../components/PageTitle'
@ -132,15 +132,15 @@ export const CommunitySearchContextPage: React.FunctionComponent<
{!props.communitySearchContextMetadata.lowProfile && (
<div className="row">
<div className={classNames('col-xs-12 col-lg-7', styles.column)}>
<p className={classNames('h5 font-weight-normal mb-4', styles.contentDescription)}>
<Text weight="regular" className={classNames('h5 mb-4', styles.contentDescription)}>
{props.communitySearchContextMetadata.description}
</p>
</Text>
<Typography.H2>Search examples</Typography.H2>
{props.communitySearchContextMetadata.examples.map(example => (
<div className="mt-3" key={example.title}>
<Typography.H3 className="mb-3">{example.title}</Typography.H3>
<p>{example.description}</p>
<Text>{example.description}</Text>
<div className="d-flex mb-4">
<small className={classNames('form-control text-monospace ', styles.exampleBar)}>
<SyntaxHighlightedSearchQuery query={`${contextQuery} ${example.query}`} />
@ -175,7 +175,7 @@ export const CommunitySearchContextPage: React.FunctionComponent<
/>
Repositories
</Typography.H2>
<p>
<Text>
Using the syntax{' '}
<Typography.Code>
{/*
@ -187,7 +187,7 @@ export const CommunitySearchContextPage: React.FunctionComponent<
{props.communitySearchContextMetadata.spec}
</Typography.Code>{' '}
in a query will search these repositories:
</p>
</Text>
{searchContextOrError &&
!isErrorLike(searchContextOrError) &&
searchContextOrError !== LOADING && (

4
client/web/src/components/ActivationDropdown/ActivationDropdown.tsx
View File

@ -9,7 +9,7 @@ import { concatMap, delay, filter, map, pairwise, startWith, tap } from 'rxjs/op
import { Activation, percentageDone } from '@sourcegraph/shared/src/components/activation/Activation'
import { ActivationChecklist } from '@sourcegraph/shared/src/components/activation/ActivationChecklist'
import { Menu, MenuButton, MenuList, Typography } from '@sourcegraph/wildcard'
import { Menu, MenuButton, MenuList, Typography, Text } from '@sourcegraph/wildcard'
import styles from './ActivationDropdown.module.scss'
@ -137,7 +137,7 @@ export class ActivationDropdown extends React.PureComponent<ActivationDropdownPr
? 'Almost there!'
: 'Welcome to Sourcegraph'}
</Typography.H3>
<p className="mb-2">Complete the steps below to finish onboarding!</p>
<Text className="mb-2">Complete the steps below to finish onboarding!</Text>
</div>
<ActivationChecklist
{...this.props}

4
client/web/src/components/CtaBanner.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react'
import classNames from 'classnames'
import { ButtonLink, Card } from '@sourcegraph/wildcard'
import { ButtonLink, Card, Text } from '@sourcegraph/wildcard'
import styles from './CtaBanner.module.scss'
@ -35,7 +35,7 @@ export const CtaBanner: React.FunctionComponent<React.PropsWithChildren<Props>>
<div className="mr-4 d-flex flex-column align-items-center">{icon}</div>
<div>
<HeadingX>{title}</HeadingX>
<p className={bodyTextClassName}>{bodyText}</p>
<Text className={bodyTextClassName}>{bodyText}</Text>
<ButtonLink
to={href}
target="_blank"

12
client/web/src/components/ErrorBoundary.tsx
View File

@ -5,7 +5,7 @@ import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
import ReloadIcon from 'mdi-react/ReloadIcon'
import { asError } from '@sourcegraph/common'
import { Button, Typography } from '@sourcegraph/wildcard'
import { Button, Typography, Text } from '@sourcegraph/wildcard'
import { DatadogClient, isWebpackChunkError } from '../monitoring'
@ -86,7 +86,7 @@ export class ErrorBoundary extends React.PureComponent<Props, State> {
title="Reload required"
subtitle={
<div className="container">
<p>A new version of Sourcegraph is available.</p>
<Text>A new version of Sourcegraph is available.</Text>
<Button onClick={this.onReloadClick} variant="primary">
Reload to update
</Button>
@ -107,13 +107,13 @@ export class ErrorBoundary extends React.PureComponent<Props, State> {
className={this.props.className}
subtitle={
<div className="container">
<p>
<Text>
Sourcegraph encountered an unexpected error. If reloading the page doesn't fix it,
contact your site admin or Sourcegraph support.
</p>
<p>
</Text>
<Text>
<Typography.Code className="text-wrap">{this.state.error.message}</Typography.Code>
</p>
</Text>
{this.props.extraContext}
</div>
}

6
client/web/src/components/FilteredConnection/FilterControl.tsx
View File

@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
import classNames from 'classnames'
import { Select } from '@sourcegraph/wildcard'
import { Select, Text } from '@sourcegraph/wildcard'
import { RadioButtons } from '../RadioButtons'
@ -90,9 +90,9 @@ export const FilterControl: React.FunctionComponent<React.PropsWithChildren<Filt
className={classNames('d-inline-flex flex-row align-center flex-wrap', styles.select)}
>
<div className="d-inline-flex flex-row mr-3 align-items-baseline">
<p className="text-xl-center text-nowrap mr-2" id={filterLabelId}>
<Text className="text-xl-center text-nowrap mr-2" id={filterLabelId}>
{filter.label}:
</p>
</Text>
<Select
aria-labelledby={filterLabelId}
id=""

3
client/web/src/components/FilteredConnection/hooks/useConnection.test.tsx
View File

@ -4,6 +4,7 @@ import { fireEvent } from '@testing-library/react'
import { dataOrThrowErrors, getDocumentNode, gql } from '@sourcegraph/http-client'
import { renderWithBrandedContext, RenderWithBrandedContextResult } from '@sourcegraph/shared/src/testing'
import { MockedTestProvider, waitForNextApolloResponse } from '@sourcegraph/shared/src/testing/apollo'
import { Text } from '@sourcegraph/wildcard'
import {
TestConnectionQueryFields,
@ -67,7 +68,7 @@ const TestComponent = () => {
))}
</ul>
{connection?.totalCount && <p>Total count: {connection.totalCount}</p>}
{connection?.totalCount && <Text>Total count: {connection.totalCount}</Text>}
{hasNextPage && (
<button type="button" onClick={fetchMore}>
Fetch more

9
client/web/src/components/FilteredConnection/ui/ConnectionSummary.tsx
View File

@ -1,6 +1,7 @@
import classNames from 'classnames'
import { pluralize } from '@sourcegraph/common'
import { Text } from '@sourcegraph/wildcard'
import { ConnectionNodesState, ConnectionProps, getTotalCount } from '../ConnectionNodes'
import { Connection } from '../ConnectionType'
@ -61,7 +62,7 @@ export const ConnectionSummary = <C extends Connection<N>, N, NP = {}, HP = {}>(
if (totalCount !== null && totalCount > 0 && !TotalCountSummaryComponent) {
return (
<p className={summaryClassName} data-testid="summary">
<Text className={summaryClassName} data-testid="summary">
<small>
<span>
{totalCount} {pluralize(noun, totalCount, pluralNoun)}{' '}
@ -76,7 +77,7 @@ export const ConnectionSummary = <C extends Connection<N>, N, NP = {}, HP = {}>(
</span>{' '}
{connection.nodes.length < totalCount && `(showing first ${connection.nodes.length})`}
</small>
</p>
</Text>
)
}
@ -87,7 +88,7 @@ export const ConnectionSummary = <C extends Connection<N>, N, NP = {}, HP = {}>(
return (
emptyElement || (
<p className={summaryClassName} data-testid="summary">
<Text className={summaryClassName} data-testid="summary">
<small>
No {pluralNoun}{' '}
{connectionQuery && (
@ -96,7 +97,7 @@ export const ConnectionSummary = <C extends Connection<N>, N, NP = {}, HP = {}>(
</span>
)}
</small>
</p>
</Text>
)
)
}

6
client/web/src/components/LoaderButton.story.tsx
View File

@ -1,5 +1,7 @@
import { storiesOf } from '@storybook/react'
import { Text } from '@sourcegraph/wildcard'
import { LoaderButton } from './LoaderButton'
import { WebStory } from './WebStory'
@ -12,9 +14,9 @@ const { add } = storiesOf('web/LoaderButton', module).addDecorator(story => (
add('Inline', () => (
<WebStory>
{() => (
<p>
<Text>
<LoaderButton loading={true} label="loader button" variant="primary" />
</p>
</Text>
)}
</WebStory>
))

9
client/web/src/components/SelfHostedCta/SelfHostedCta.story.tsx
View File

@ -3,6 +3,7 @@ import React from 'react'
import { DecoratorFn, Meta } from '@storybook/react'
import { NOOP_TELEMETRY_SERVICE } from '@sourcegraph/shared/src/telemetry/telemetryService'
import { Text } from '@sourcegraph/wildcard'
import { WebStory } from '../WebStory'
@ -21,13 +22,13 @@ export const Basic: React.FunctionComponent<React.PropsWithChildren<Partial<Self
props
): JSX.Element => (
<SelfHostedCta telemetryService={NOOP_TELEMETRY_SERVICE} page="storybook" {...props}>
<p className="mb-2">
<Text className="mb-2">
<strong>Run Sourcegraph self-hosted for more enterprise features</strong>
</p>
<p className="mb-2">
</Text>
<Text className="mb-2">
For team oriented functionality, additional code hosts and enterprise only features, install Sourcegraph
self-hosted.
</p>
</Text>
</SelfHostedCta>
)

6
client/web/src/components/Timeline.story.tsx
View File

@ -3,6 +3,8 @@ import { parseISO } from 'date-fns'
import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
import CheckIcon from 'mdi-react/CheckIcon'
import { Text } from '@sourcegraph/wildcard'
import { Timeline } from './Timeline'
import { WebStory } from './WebStory'
@ -69,7 +71,7 @@ add('Details', () => (
className: 'bg-danger',
text: 'Second event description',
date: '2020-06-15T12:20:00+00:00',
details: <p>HELLO THERE</p>,
details: <Text>HELLO THERE</Text>,
expanded: true,
},
{
@ -77,7 +79,7 @@ add('Details', () => (
className: 'bg-success',
text: 'Third event description',
date: '2020-06-15T13:25:00+00:00',
details: <p>HELLO THERE</p>,
details: <Text>HELLO THERE</Text>,
expanded: false,
},
]}

12
client/web/src/components/__snapshots__/ErrorBoundary.test.tsx.snap
View File

@ -22,10 +22,14 @@ exports[`ErrorBoundary passes through if non-error 1`] = `
<div
class="container"
>
<p>
<p
class=""
>
Sourcegraph encountered an unexpected error. If reloading the page doesn't fix it, contact your site admin or Sourcegraph support.
</p>
<p>
<p
class=""
>
<code
class="code text-wrap"
>
@ -68,7 +72,9 @@ exports[`ErrorBoundary renders reload page if chunk error 1`] = `
<div
class="container"
>
<p>
<p
class=""
>
A new version of Sourcegraph is available.
</p>
<button

4
client/web/src/components/diff/FileDiffNode.tsx
View File

@ -9,7 +9,7 @@ import { Observable } from 'rxjs'
import { ViewerId } from '@sourcegraph/shared/src/api/viewerTypes'
import { ThemeProps } from '@sourcegraph/shared/src/theme'
import { Button, Badge, Link, Icon } from '@sourcegraph/wildcard'
import { Button, Badge, Link, Icon, Text } from '@sourcegraph/wildcard'
import { FileDiffFields } from '../../graphql-operations'
import { DiffMode } from '../../repo/commit/RepositoryCommitPage'
@ -152,7 +152,7 @@ export const FileDiffNode: React.FunctionComponent<React.PropsWithChildren<FileD
<div className="text-muted m-2">Binary files can't be rendered.</div>
) : !node.newPath && !renderDeleted ? (
<div className="text-muted m-2">
<p className="mb-0">Deleted files aren't rendered by default.</p>
<Text className="mb-0">Deleted files aren't rendered by default.</Text>
<Button className="m-0 p-0" onClick={onClickToViewDeleted} variant="link">
Click here to view.
</Button>

10
client/web/src/components/externalServices/AddExternalServicesPage.tsx
View File

@ -4,7 +4,7 @@ import * as H from 'history'
import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
import { ThemeProps } from '@sourcegraph/shared/src/theme'
import { useLocalStorage, Button, Link, Alert, Typography } from '@sourcegraph/wildcard'
import { useLocalStorage, Button, Link, Alert, Typography, Text } from '@sourcegraph/wildcard'
import { Scalars } from '../../graphql-operations'
import { PageTitle } from '../PageTitle'
@ -84,15 +84,15 @@ export const AddExternalServicesPage: React.FunctionComponent<
<div className="d-flex justify-content-between align-items-center mt-3 mb-3">
<Typography.H2 className="mb-0">Add repositories</Typography.H2>
</div>
<p className="mt-2">Add repositories from one of these code hosts.</p>
<Text className="mt-2">Add repositories from one of these code hosts.</Text>
{!hasDismissedPrivacyWarning && (
<Alert variant="info">
{!userID && (
<p>
<Text>
This Sourcegraph installation will never send your code, repository names, file names, or
any other specific code data to Sourcegraph.com or any other destination. Your code is kept
private on this installation.
</p>
</Text>
)}
<Typography.H3>This Sourcegraph installation will access your code host by:</Typography.H3>
<ul>
@ -141,7 +141,7 @@ export const AddExternalServicesPage: React.FunctionComponent<
<>
<br />
<Typography.H2>Other connections</Typography.H2>
<p className="mt-2">Add connections to non-code-host services.</p>
<Text className="mt-2">Add connections to non-code-host services.</Text>
{Object.entries(nonCodeHostExternalServices).map(([id, externalService]) => (
<div className={styles.addExternalServicesPageCard} key={id}>
<ExternalServiceCard to={getAddURL(id)} {...externalService} />

4
client/web/src/components/externalServices/ExternalServiceCard.tsx
View File

@ -5,7 +5,7 @@ import * as H from 'history'
import AccountIcon from 'mdi-react/AccountIcon'
import ChevronRightIcon from 'mdi-react/ChevronRightIcon'
import { Icon, Link, Typography } from '@sourcegraph/wildcard'
import { Icon, Link, Typography, Text } from '@sourcegraph/wildcard'
import { ExternalServiceFields, ExternalServiceKind } from '../../graphql-operations'
@ -57,7 +57,7 @@ export const ExternalServiceCard: React.FunctionComponent<React.PropsWithChildre
</small>
)}
</Typography.H3>
{shortDescription && <p className="mb-0 text-muted">{shortDescription}</p>}
{shortDescription && <Text className="mb-0 text-muted">{shortDescription}</Text>}
</div>
{to && <ChevronRightIcon className="align-self-center" />}
</div>

6
client/web/src/components/externalServices/ExternalServiceForm.tsx
View File

@ -8,7 +8,7 @@ import { Form } from '@sourcegraph/branded/src/components/Form'
import { ErrorLike } from '@sourcegraph/common'
import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
import { ThemeProps } from '@sourcegraph/shared/src/theme'
import { Button, LoadingSpinner, Alert, Typography } from '@sourcegraph/wildcard'
import { Button, LoadingSpinner, Alert, Typography, Text } from '@sourcegraph/wildcard'
import { AddExternalServiceInput } from '../../graphql-operations'
import { DynamicallyImportedMonacoSettingsEditor } from '../../settings/DynamicallyImportedMonacoSettingsEditor'
@ -109,9 +109,9 @@ export const ExternalServiceForm: React.FunctionComponent<React.PropsWithChildre
className="test-external-service-editor"
telemetryService={telemetryService}
/>
<p className="form-text text-muted">
<Text className="form-text text-muted">
<small>Use Ctrl+Space for completion, and hover over JSON properties for documentation.</small>
</p>
</Text>
</div>
<Button
type="submit"

16
client/web/src/components/externalServices/ExternalServiceWebhook.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import { Alert, Link, Typography } from '@sourcegraph/wildcard'
import { Alert, Link, Typography, Text } from '@sourcegraph/wildcard'
import { ExternalServiceFields, ExternalServiceKind } from '../../graphql-operations'
import { CopyableText } from '../CopyableText'
@ -16,12 +16,12 @@ export const ExternalServiceWebhook: React.FunctionComponent<React.PropsWithChil
return <></>
}
let description = <p />
let description = <Text />
switch (kind) {
case ExternalServiceKind.BITBUCKETSERVER:
description = (
<p>
<Text>
<Link
to="https://docs.sourcegraph.com/admin/external_service/bitbucket_server#webhooks"
target="_blank"
@ -41,7 +41,7 @@ export const ExternalServiceWebhook: React.FunctionComponent<React.PropsWithChil
.
<br />
To set up another webhook manually, use the following URL:
</p>
</Text>
)
break
@ -59,7 +59,7 @@ export const ExternalServiceWebhook: React.FunctionComponent<React.PropsWithChil
<Typography.H3>Batch changes webhooks</Typography.H3>
{description}
<CopyableText className="mb-2" text={webhookURL} size={webhookURL.length} />
<p className="mb-0">
<Text className="mb-0">
Note that only{' '}
<Link to="https://docs.sourcegraph.com/user/batch_changes" target="_blank" rel="noopener noreferrer">
batch changes
@ -69,14 +69,14 @@ export const ExternalServiceWebhook: React.FunctionComponent<React.PropsWithChil
see the docs on how to use them
</Link>
.
</p>
</Text>
</Alert>
)
}
function commonDescription(url: string): JSX.Element {
return (
<p>
<Text>
Point{' '}
<Link
to={`https://docs.sourcegraph.com/admin/external_service/${url}#webhooks`}
@ -86,6 +86,6 @@ function commonDescription(url: string): JSX.Element {
webhooks
</Link>{' '}
for this code host connection at the following URL:
</p>
</Text>
)
}

4
client/web/src/components/externalServices/ExternalServicesPage.tsx
View File

@ -9,7 +9,7 @@ import { tap } from 'rxjs/operators'
import { isErrorLike, ErrorLike } from '@sourcegraph/common'
import { ActivationProps } from '@sourcegraph/shared/src/components/activation/Activation'
import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
import { Link, Button, Icon, Typography } from '@sourcegraph/wildcard'
import { Link, Button, Icon, Typography, Text } from '@sourcegraph/wildcard'
import { AuthenticatedUser } from '../../auth'
import { ListExternalServiceFields, Scalars, ExternalServicesResult } from '../../graphql-operations'
@ -100,7 +100,7 @@ export const ExternalServicesPage: React.FunctionComponent<React.PropsWithChildr
</Button>
)}
</div>
<p className="mt-2">Manage code host connections to sync repositories.</p>
<Text className="mt-2">Manage code host connections to sync repositories.</Text>
<FilteredConnection<
ListExternalServiceFields,
Omit<ExternalServiceNodeProps, 'node'>,

58
client/web/src/components/externalServices/externalServices.tsx
View File

@ -13,7 +13,7 @@ import LanguagePythonIcon from 'mdi-react/LanguagePythonIcon'
import NpmIcon from 'mdi-react/NpmIcon'
import { PhabricatorIcon } from '@sourcegraph/shared/src/components/icons'
import { Link, Typography } from '@sourcegraph/wildcard'
import { Link, Typography, Text } from '@sourcegraph/wildcard'
import awsCodeCommitSchemaJSON from '../../../../../schema/aws_codecommit.schema.json'
import bitbucketCloudSchemaJSON from '../../../../../schema/bitbucket_cloud.schema.json'
@ -168,7 +168,7 @@ const githubInstructions = (isEnterprise: boolean): JSX.Element => (
</ul>
</li>
</ol>
<p>
<Text>
See{' '}
<Link
rel="noopener noreferrer"
@ -178,7 +178,7 @@ const githubInstructions = (isEnterprise: boolean): JSX.Element => (
the docs for more options
</Link>
, or try one of the buttons below.
</p>
</Text>
</div>
)
@ -236,7 +236,7 @@ const gitlabInstructions = (isSelfManaged: boolean): JSX.Element => (
</ul>
</li>
</ol>
<p>
<Text>
See{' '}
<Link
rel="noopener noreferrer"
@ -246,7 +246,7 @@ const gitlabInstructions = (isSelfManaged: boolean): JSX.Element => (
the docs for more options
</Link>
, or try one of the buttons below.
</p>
</Text>
</div>
)
@ -594,7 +594,7 @@ const AWS_CODE_COMMIT: AddExternalServiceOptions = {
You can optionally exclude repositories using the <Field>exclude</Field> field.
</li>
</ol>
<p>
<Text>
See{' '}
<Link
rel="noopener noreferrer"
@ -604,7 +604,7 @@ const AWS_CODE_COMMIT: AddExternalServiceOptions = {
the docs for more options
</Link>
, or try one of the buttons below.
</p>
</Text>
</div>
),
editorActions: [
@ -732,7 +732,7 @@ const BITBUCKET_CLOUD: AddExternalServiceOptions = {
index.
</li>
</ol>
<p>
<Text>
See{' '}
<Link
rel="noopener noreferrer"
@ -742,7 +742,7 @@ const BITBUCKET_CLOUD: AddExternalServiceOptions = {
the docs for more options
</Link>
, or try one of the buttons below.
</p>
</Text>
</div>
),
}
@ -821,7 +821,7 @@ const BITBUCKET_SERVER: AddExternalServiceOptions = {
</ul>
</li>
</ol>
<p>
<Text>
See{' '}
<Link
rel="noopener noreferrer"
@ -831,7 +831,7 @@ const BITBUCKET_SERVER: AddExternalServiceOptions = {
the docs for more options
</Link>
, or try one of the buttons below.
</p>
</Text>
</div>
),
editorActions: [
@ -954,16 +954,16 @@ const SRC_SERVE_GIT: AddExternalServiceOptions = {
}`,
instructions: (
<div>
<p>
<Text>
In the configuration below, set <Field>url</Field> to be the URL of src serve-git.
</p>
<p>
</Text>
<Text>
Install the{' '}
<Link rel="noopener noreferrer" target="_blank" to="https://github.com/sourcegraph/src-cli">
Sourcegraph CLI (src)
</Link>
. src serve-git allows you to serve any git repositories that you have on disk.
</p>
</Text>
</div>
),
editorActions: [
@ -1000,7 +1000,7 @@ const GITOLITE: AddExternalServiceOptions = {
Sourcegraph. This is typically the hostname of the Gitolite server.
</li>
</ol>
<p>
<Text>
See{' '}
<Link
rel="noopener noreferrer"
@ -1010,7 +1010,7 @@ const GITOLITE: AddExternalServiceOptions = {
the docs for more advanced options
</Link>
, or try one of the buttons below.
</p>
</Text>
</div>
),
editorActions: [
@ -1105,7 +1105,7 @@ const GENERIC_GIT: AddExternalServiceOptions = {
appended to the host URL to obtain the repository clone URLs.
</li>
</ol>
<p>
<Text>
See{' '}
<Link
rel="noopener noreferrer"
@ -1115,7 +1115,7 @@ const GENERIC_GIT: AddExternalServiceOptions = {
the docs for more options
</Link>
, or try one of the buttons below.
</p>
</Text>
</div>
),
editorActions: [
@ -1164,7 +1164,7 @@ const PERFORCE: AddExternalServiceOptions = {
Set the <Field>p4.passwd</Field> field to be the ticket value of the authenticated user.
</li>
</ol>
<p>
<Text>
See{' '}
<Link
rel="noopener noreferrer"
@ -1174,7 +1174,7 @@ const PERFORCE: AddExternalServiceOptions = {
the docs for more advanced options
</Link>
, or try one of the buttons below.
</p>
</Text>
</div>
),
editorActions: [
@ -1225,8 +1225,8 @@ const JVM_PACKAGES: AddExternalServiceOptions = {
<Typography.Code>"org.hamcrest:hamcrest-core:1.3:default"</Typography.Code>.
</li>
</ol>
<p>⚠️ JVM dependency repositories are visible by all users of the Sourcegraph instance.</p>
<p>⚠️ It is only possible to register one JVM dependency code host per Sourcegraph instance.</p>
<Text>⚠️ JVM dependency repositories are visible by all users of the Sourcegraph instance.</Text>
<Text>⚠️ It is only possible to register one JVM dependency code host per Sourcegraph instance.</Text>
</div>
),
editorActions: [],
@ -1303,8 +1303,8 @@ const NPM_PACKAGES: AddExternalServiceOptions = {
<Typography.Code>"@types/lodash@4.14.177"</Typography.Code>. Version ranges are not supported.
</li>
</ol>
<p>⚠️ npm package repositories are visible by all users of the Sourcegraph instance.</p>
<p>⚠️ It is only possible to register one npm package code host per Sourcegraph instance.</p>
<Text>⚠️ npm package repositories are visible by all users of the Sourcegraph instance.</Text>
<Text>⚠️ It is only possible to register one npm package code host per Sourcegraph instance.</Text>
</div>
),
editorActions: [],
@ -1335,8 +1335,8 @@ const GO_MODULES = {
manually add. For example, <Typography.Code>"cloud.google.com/go/kms@v1.1.0"</Typography.Code>.
</li>
</ol>
<p>⚠️ go module repositories are visible by all users of the Sourcegraph instance.</p>
<p>⚠️ It is only possible to register one go modules code host per Sourcegraph instance.</p>
<Text>⚠️ go module repositories are visible by all users of the Sourcegraph instance.</Text>
<Text>⚠️ It is only possible to register one go modules code host per Sourcegraph instance.</Text>
</div>
),
editorActions: [],
@ -1367,8 +1367,8 @@ const PYTHON_PACKAGES = {
manually add. For example, <Typography.Code>"numpy==1.22.3"</Typography.Code>.
</li>
</ol>
<p>⚠️ Python package repositories are visible by all users of the Sourcegraph instance.</p>
<p>⚠️ It is only possible to register one Python packages code host per Sourcegraph instance.</p>
<Text>⚠️ Python package repositories are visible by all users of the Sourcegraph instance.</Text>
<Text>⚠️ It is only possible to register one Python packages code host per Sourcegraph instance.</Text>
</div>
),
editorActions: [],

14
client/web/src/components/fuzzyFinder/FuzzyModal.tsx
View File

@ -6,7 +6,7 @@ import CloseIcon from 'mdi-react/CloseIcon'
import { pluralize } from '@sourcegraph/common'
import { toPrettyBlobURL } from '@sourcegraph/shared/src/util/url'
import { useLocalStorage, Button, Modal, Icon, Typography } from '@sourcegraph/wildcard'
import { useLocalStorage, Button, Modal, Icon, Typography, Text } from '@sourcegraph/wildcard'
import { CaseInsensitiveFuzzySearch } from '../../fuzzyFinder/CaseInsensitiveFuzzySearch'
import { FuzzySearch, FuzzySearchResult, SearchIndexing, SearchValue } from '../../fuzzyFinder/FuzzySearch'
@ -123,7 +123,7 @@ export const FuzzyModal: React.FunctionComponent<React.PropsWithChildren<FuzzyMo
}
const links = fuzzyResult.links
if (links.length === 0) {
setFuzzyResultElement(<p>No files matching '{query}'</p>)
setFuzzyResultElement(<Text>No files matching '{query}'</Text>)
setResultsCount(0)
setTotalFileCount(search.totalFileCount)
return setIsComplete(fuzzyResult.isComplete)
@ -157,11 +157,11 @@ export const FuzzyModal: React.FunctionComponent<React.PropsWithChildren<FuzzyMo
}
if (props.isLoading) {
return empty(<p>Downloading...</p>)
return empty(<Text>Downloading...</Text>)
}
if (props.isError) {
return empty(<p>Error: {JSON.stringify(props.isError)}</p>)
return empty(<Text>Error: {JSON.stringify(props.isError)}</Text>)
}
switch (props.fsm.key) {
@ -169,9 +169,9 @@ export const FuzzyModal: React.FunctionComponent<React.PropsWithChildren<FuzzyMo
handleEmpty(props)
return empty(<></>)
case 'downloading':
return empty(<p>Downloading...</p>)
return empty(<Text>Downloading...</Text>)
case 'failed':
return empty(<p>Error: {props.fsm.errorMessage}</p>)
return empty(<Text>Error: {props.fsm.errorMessage}</Text>)
case 'indexing': {
const loader = props.fsm.indexing
later()
@ -183,7 +183,7 @@ export const FuzzyModal: React.FunctionComponent<React.PropsWithChildren<FuzzyMo
case 'ready':
return renderFiles(props.fsm.fuzzy)
default:
return empty(<p>ERROR</p>)
return empty(<Text>ERROR</Text>)
}
}, [props, focusIndex, maxResults, query])

6
client/web/src/enterprise/batches/BatchSpec.tsx
View File

@ -4,7 +4,7 @@ import { kebabCase } from 'lodash'
import FileDownloadIcon from 'mdi-react/FileDownloadIcon'
import { ThemeProps } from '@sourcegraph/shared/src/theme'
import { Link, Button, Icon } from '@sourcegraph/wildcard'
import { Link, Button, Icon, Text } from '@sourcegraph/wildcard'
import { Timestamp } from '../../components/time/Timestamp'
import { BatchChangeFields } from '../../graphql-operations'
@ -113,9 +113,9 @@ export const BatchSpecMeta: React.FunctionComponent<React.PropsWithChildren<Batc
lastApplier,
lastAppliedAt,
}) => (
<p className="mb-2">
<Text className="mb-2">
{lastApplier ? <Link to={lastApplier.url}>{lastApplier.username}</Link> : 'A deleted user'}{' '}
{createdAt === lastAppliedAt ? 'created' : 'updated'} this batch change{' '}
<Timestamp date={lastAppliedAt ?? createdAt} /> by applying the following batch spec:
</p>
</Text>
)

5
client/web/src/enterprise/batches/DropdownButton.tsx
View File

@ -13,6 +13,7 @@ import {
Position,
MenuItem,
Typography,
Text,
} from '@sourcegraph/wildcard'
import styles from './DropdownButton.module.scss'
@ -184,9 +185,9 @@ const DropdownItem: React.FunctionComponent<React.PropsWithChildren<DropdownItem
</>
)}
</Typography.H4>
<p className="text-wrap text-muted mb-0">
<Text className="text-wrap text-muted mb-0">
<small>{action.dropdownDescription}</small>
</p>
</Text>
</MenuItem>
)
}

14
client/web/src/enterprise/batches/batch-spec/edit/DownloadSpecModal.tsx
View File

@ -4,7 +4,7 @@ import { VisuallyHidden } from '@reach/visually-hidden'
import CloseIcon from 'mdi-react/CloseIcon'
import { CodeSnippet } from '@sourcegraph/branded/src/components/CodeSnippet'
import { Button, Link, Modal, Typography } from '@sourcegraph/wildcard'
import { Button, Link, Modal, Typography, Text } from '@sourcegraph/wildcard'
import { BatchSpecDownloadLink, getFileName } from '../../BatchSpec'
@ -47,10 +47,10 @@ export const DownloadSpecModal: React.FunctionComponent<React.PropsWithChildren<
<div className={styles.container}>
<div className={styles.left}>
<p>
<Text>
Use the <Link to="https://docs.sourcegraph.com/cli">Sourcegraph CLI (src) </Link>
to run this batch change locally.
</p>
</Text>
<CodeSnippet
code={`src batch preview -f ${getFileName(name)}`}
@ -58,19 +58,19 @@ export const DownloadSpecModal: React.FunctionComponent<React.PropsWithChildren<
className={styles.codeSnippet}
/>
<p className="p-0 m-0">
<Text className="p-0 m-0">
Follow the URL printed in your terminal to see the preview and (when you're ready) create the batch
change.
</p>
</Text>
</div>
<div className={styles.right}>
<div>
<Typography.H4>About src-cli </Typography.H4>
<p>
<Text>
src cli is a command line interface to Sourcegraph. Its{' '}
<span className="text-monospace">batch</span> command allows to run batch specification files
using Docker.
</p>
</Text>
<Link to="https://docs.sourcegraph.com/cli">Download src-cli</Link>
</div>
</div>

5
client/web/src/enterprise/batches/batch-spec/edit/RunBatchSpecButton.tsx
View File

@ -16,6 +16,7 @@ import {
PopoverTrigger,
Icon,
Typography,
Text,
} from '@sourcegraph/wildcard'
import { ExecutionOptions } from '../BatchSpecContext'
@ -121,9 +122,9 @@ const ExecutionOption: React.FunctionComponent<React.PropsWithChildren<Execution
</div>
{!props.disabled && props.moreInfo && (
<animated.div className={styles.expandedInfo} style={infoStyle}>
<p className="m-0 pb-2" ref={infoReference}>
<Text className="m-0 pb-2" ref={infoReference}>
{props.moreInfo}
</p>
</Text>
</animated.div>
)}
</div>

8
client/web/src/enterprise/batches/batch-spec/edit/RunServerSideModal.tsx
View File

@ -3,7 +3,7 @@ import React from 'react'
import { VisuallyHidden } from '@reach/visually-hidden'
import CloseIcon from 'mdi-react/CloseIcon'
import { Button, Link, Modal, Typography } from '@sourcegraph/wildcard'
import { Button, Link, Modal, Typography, Text } from '@sourcegraph/wildcard'
import styles from './RunServerSideModal.module.scss'
@ -34,10 +34,10 @@ export const RunServerSideModal: React.FunctionComponent<RunServerSideModalProps
<div className={styles.content}>
<div className={styles.left}>
<p>
<Text>
Install executors to enable running batch changes server-side instead of locally. Executors can also
be autoscaled to speed up creating large-scale batch changes.
</p>
</Text>
<div className={styles.videoContainer}>Video</div>
</div>
@ -58,7 +58,7 @@ export const RunServerSideModal: React.FunctionComponent<RunServerSideModalProps
{/* <div className={styles.rightBottom}>
<div className={styles.blank}>
<Typography.H4>Request a demo</Typography.H4>
<p>Learn more about this free feature of batch changes.</p>
<Text>Learn more about this free feature of batch changes.</Text>
<Button variant="primary">Request Demo</Button>
</div>

6
client/web/src/enterprise/batches/batch-spec/edit/library/LibraryPane.tsx
View File

@ -4,7 +4,7 @@ import ChevronDoubleLeftIcon from 'mdi-react/ChevronDoubleLeftIcon'
import ChevronDoubleRightIcon from 'mdi-react/ChevronDoubleRightIcon'
import { animated, useSpring } from 'react-spring'
import { Button, useLocalStorage, Icon, Link } from '@sourcegraph/wildcard'
import { Button, useLocalStorage, Icon, Link, Text } from '@sourcegraph/wildcard'
import { Scalars } from '../../../../../graphql-operations'
import { insertNameIntoLibraryItem } from '../../yaml-util'
@ -141,9 +141,9 @@ export const LibraryPane: React.FunctionComponent<React.PropsWithChildren<Librar
</li>
))}
</ul>
<p className={styles.lastItem}>
<Text className={styles.lastItem}>
<Link to="https://github.com/sourcegraph/batch-change-examples">View more examples</Link>
</p>
</Text>
</animated.div>
</animated.div>
</>

6
client/web/src/enterprise/batches/batch-spec/edit/library/ReplaceSpecModal.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import { Button, Modal, Typography } from '@sourcegraph/wildcard'
import { Button, Modal, Typography, Text } from '@sourcegraph/wildcard'
export interface ReplaceSpecModalProps {
libraryItemName: string
@ -15,10 +15,10 @@ export const ReplaceSpecModal: React.FunctionComponent<React.PropsWithChildren<R
}) => (
<Modal onDismiss={onCancel} aria-labelledby={MODAL_LABEL_ID}>
<Typography.H3 id={MODAL_LABEL_ID}>Replace batch spec?</Typography.H3>
<p className="mb-4">
<Text className="mb-4">
Are you sure you want to replace your current batch spec with the template for{' '}
<strong>{libraryItemName}</strong>?
</p>
</Text>
<div className="d-flex justify-content-end">
<Button className="mr-2" onClick={onCancel} outline={true} variant="secondary">
Cancel

17
client/web/src/enterprise/batches/batch-spec/execute/ActionsMenu.tsx
View File

@ -9,7 +9,18 @@ import SyncIcon from 'mdi-react/SyncIcon'
import { useHistory, useLocation } from 'react-router'
import { useMutation } from '@sourcegraph/http-client'
import { Button, Icon, Link, Menu, MenuButton, MenuItem, MenuList, Position, useMeasure } from '@sourcegraph/wildcard'
import {
Button,
Icon,
Link,
Menu,
MenuButton,
MenuItem,
MenuList,
Position,
Text,
useMeasure,
} from '@sourcegraph/wildcard'
import {
BatchSpecExecutionFields,
@ -133,11 +144,11 @@ const MemoizedActionsMenu: React.FunctionComponent<
onConfirm={cancelModalType === 'cancel' ? cancelBatchSpecExecution : cancelAndEdit}
modalHeader={cancelModalType === 'cancel' ? 'Cancel execution' : 'The execution is still running'}
modalBody={
<p>
<Text>
{cancelModalType === 'cancel'
? 'Are you sure you want to cancel the current execution?'
: 'You are unable to edit the spec when an execution is running.'}
</p>
</Text>
}
isLoading={isCancelLoading}
/>

4
client/web/src/enterprise/batches/batch-spec/execute/CancelExecutionModal.story.tsx
View File

@ -2,6 +2,8 @@ import { boolean } from '@storybook/addon-knobs'
import { storiesOf } from '@storybook/react'
import { noop } from 'lodash'
import { Text } from '@sourcegraph/wildcard'
import { WebStory } from '../../../../components/WebStory'
import { CancelExecutionModal } from './CancelExecutionModal'
@ -15,7 +17,7 @@ add('CancelExecutionModal', () => (
{props => (
<CancelExecutionModal
{...props}
modalBody={<p>Are you sure you want to cancel the current execution?</p>}
modalBody={<Text>Are you sure you want to cancel the current execution?</Text>}
isOpen={true}
isLoading={boolean('isLoading', false)}
onCancel={noop}

4
client/web/src/enterprise/batches/batch-spec/execute/ReadOnlyBatchSpecForm.tsx
View File

@ -4,7 +4,7 @@ import { useHistory } from 'react-router'
import { useMutation } from '@sourcegraph/http-client'
import { ThemeProps } from '@sourcegraph/shared/src/theme'
import { Alert, Button, Typography } from '@sourcegraph/wildcard'
import { Alert, Button, Typography, Text } from '@sourcegraph/wildcard'
import {
BatchSpecExecutionFields,
@ -102,7 +102,7 @@ const MemoizedReadOnlyBatchSpecForm: React.FunctionComponent<
isOpen={showCancelModal}
onCancel={() => setShowCancelModal(false)}
onConfirm={cancelBatchSpecExecution}
modalBody={<p>Are you sure you want to cancel the current execution?</p>}
modalBody={<Text>Are you sure you want to cancel the current execution?</Text>}
isLoading={isCancelLoading}
/>
</div>

39
client/web/src/enterprise/batches/batch-spec/execute/workspaces/WorkspaceDetails.tsx
View File

@ -33,6 +33,7 @@ import {
Card,
Icon,
Typography,
Text,
} from '@sourcegraph/wildcard'
import { Collapsible } from '../../../../../components/Collapsible'
@ -179,8 +180,8 @@ const HiddenWorkspaceDetails: React.FunctionComponent<React.PropsWithChildren<Hi
<Icon as={EyeOffOutlineIcon} />
<VisuallyHidden>Hidden Workspace</VisuallyHidden>
</Typography.H1>
<p className="text-center">This workspace is hidden due to permissions.</p>
<p className="text-center">Contact the owner of this batch change for more information.</p>
<Text alignment="center">This workspace is hidden due to permissions.</Text>
<Text alignment="center">Contact the owner of this batch change for more information.</Text>
</>
)
@ -244,7 +245,7 @@ const VisibleWorkspaceDetails: React.FunctionComponent<React.PropsWithChildren<V
{workspace.changesetSpecs && workspace.state === BatchSpecWorkspaceState.COMPLETED && (
<div className="mb-3">
{workspace.changesetSpecs.length === 0 && (
<p className="mb-0 text-muted">This workspace generated no changeset specs.</p>
<Text className="mb-0 text-muted">This workspace generated no changeset specs.</Text>
)}
{workspace.changesetSpecs.map((changesetSpec, index) => (
<React.Fragment key={changesetSpec.id}>
@ -289,11 +290,11 @@ const IgnoredWorkspaceDetails: React.FunctionComponent<React.PropsWithChildren<I
<Icon as={LinkVariantRemoveIcon} />
<VisuallyHidden>Ignored Workspace</VisuallyHidden>
</Typography.H1>
<p className="text-center">
<Text alignment="center">
This workspace has been skipped because a <Typography.Code>.batchignore</Typography.Code> file is present in
the workspace repository.
</p>
<p className="text-center">Enable the execution option to "allow ignored" to override.</p>
</Text>
<Text alignment="center">Enable the execution option to "allow ignored" to override.</Text>
</>
)
@ -310,8 +311,8 @@ const UnsupportedWorkspaceDetails: React.FunctionComponent<
<Icon as={LinkVariantRemoveIcon} />
<VisuallyHidden>Unsupported Workspace</VisuallyHidden>
</Typography.H1>
<p className="text-center">This workspace has been skipped because it is from an unsupported codehost.</p>
<p className="text-center">Enable the execution option to "allow unsupported" to override.</p>
<Text alignment="center">This workspace has been skipped because it is from an unsupported codehost.</Text>
<Text alignment="center">Enable the execution option to "allow unsupported" to override.</Text>
</>
)
@ -395,10 +396,10 @@ const ChangesetSpecNode: React.FunctionComponent<React.PropsWithChildren<Changes
<CardBody>
<Typography.H3>Changeset template</Typography.H3>
<Typography.H4>{node.description.title}</Typography.H4>
<p className="mb-0">{node.description.body}</p>
<p>
<Text className="mb-0">{node.description.body}</Text>
<Text>
<strong>Published:</strong> <PublishedValue published={node.description.published} />
</p>
</Text>
<Collapsible
title={<Typography.H3 className="mb-0">Changes</Typography.H3>}
titleClassName="flex-grow-1"
@ -509,13 +510,13 @@ const WorkspaceStep: React.FunctionComponent<React.PropsWithChildren<WorkspaceSt
</TabList>
<TabPanels>
<TabPanel className="pt-2" key="logs">
{!step.startedAt && <p className="text-muted mb-0">Step not started yet</p>}
{!step.startedAt && <Text className="text-muted mb-0">Step not started yet</Text>}
{step.startedAt && outputLines && <LogOutput text={outputLines.join('\n')} />}
</TabPanel>
<TabPanel className="pt-2" key="output-variables">
{!step.startedAt && <p className="text-muted mb-0">Step not started yet</p>}
{!step.startedAt && <Text className="text-muted mb-0">Step not started yet</Text>}
{step.outputVariables?.length === 0 && (
<p className="text-muted mb-0">No output variables specified</p>
<Text className="text-muted mb-0">No output variables specified</Text>
)}
<ul className="mb-0">
{step.outputVariables?.map(variable => (
@ -526,7 +527,7 @@ const WorkspaceStep: React.FunctionComponent<React.PropsWithChildren<WorkspaceSt
</ul>
</TabPanel>
<TabPanel className="pt-2" key="diff">
{!step.startedAt && <p className="text-muted mb-0">Step not started yet</p>}
{!step.startedAt && <Text className="text-muted mb-0">Step not started yet</Text>}
{step.startedAt && (
<WorkspaceStepFileDiffConnection
isLightTheme={isLightTheme}
@ -538,7 +539,7 @@ const WorkspaceStep: React.FunctionComponent<React.PropsWithChildren<WorkspaceSt
</TabPanel>
<TabPanel className="pt-2" key="files-env">
{step.environment.length === 0 && (
<p className="text-muted mb-0">No environment variables specified</p>
<Text className="text-muted mb-0">No environment variables specified</Text>
)}
<ul className="mb-0">
{step.environment.map(variable => (
@ -558,18 +559,18 @@ const WorkspaceStep: React.FunctionComponent<React.PropsWithChildren<WorkspaceSt
<Typography.H4>Command</Typography.H4>
<LogOutput text={step.run} className="mb-2" />
<Typography.H4>Container</Typography.H4>
<p className="text-monospace mb-0">{step.container}</p>
<Text className="text-monospace mb-0">{step.container}</Text>
</TabPanel>
</TabPanels>
</Tabs>
)}
{step.skipped && (
<p className="mb-0">
<Text className="mb-0">
<strong>
Step has been skipped
{cachedResultFound && <> because a cached result was found for this workspace</>}.
</strong>
</p>
</Text>
)}
</CardBody>
</Card>

8
client/web/src/enterprise/batches/close/BatchChangeCloseAlert.tsx
View File

@ -4,7 +4,7 @@ import * as H from 'history'
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
import { isErrorLike, asError, pluralize } from '@sourcegraph/common'
import { Button, AlertLink, CardBody, Card, Alert, Checkbox } from '@sourcegraph/wildcard'
import { Button, AlertLink, CardBody, Card, Alert, Checkbox, Text } from '@sourcegraph/wildcard'
import { LoaderButton } from '../../../components/LoaderButton'
import { Scalars } from '../../../graphql-operations'
@ -57,14 +57,14 @@ export const BatchChangeCloseAlert: React.FunctionComponent<React.PropsWithChild
<>
<Card className="mb-3">
<CardBody>
<p>
<Text>
<strong>
After closing this batch change, it will be read-only and no new batch specs can be applied.
</strong>
</p>
</Text>
{totalCount > 0 && (
<>
<p>By default, all changesets remain untouched.</p>
<Text>By default, all changesets remain untouched.</Text>
<Checkbox
wrapperClassName="mb-3"
id="closeChangesets"

6
client/web/src/enterprise/batches/close/CloseChangesetsListEmptyElement.tsx
View File

@ -1,11 +1,13 @@
import React from 'react'
import { Text } from '@sourcegraph/wildcard'
import styles from './CloseChangesetsListEmptyElement.module.scss'
export const CloseChangesetsListEmptyElement: React.FunctionComponent<React.PropsWithChildren<{}>> = () => (
<div className={styles.closeChangesetsListEmptyElementBody}>
<p className="text-center text-muted font-weight-normal">
<Text alignment="center" weight="regular" className="text-muted">
Closing this batch change will not alter changesets and no changesets will remain open.
</p>
</Text>
</div>
)

4
client/web/src/enterprise/batches/create/InsightTemplatesBanner.tsx
View File

@ -2,7 +2,7 @@ import React from 'react'
import classNames from 'classnames'
import { Card, CardBody, Typography } from '@sourcegraph/wildcard'
import { Card, CardBody, Typography, Text } from '@sourcegraph/wildcard'
import { CodeInsightsBatchesIcon } from './CodeInsightsBatchesIcon'
@ -40,7 +40,7 @@ export const InsightTemplatesBanner: React.FunctionComponent<React.PropsWithChil
<CodeInsightsBatchesIcon className="mr-4" />
<div className="flex-grow-1">
<Typography.H4>{heading}</Typography.H4>
<p className="mb-0">{paragraph}</p>
<Text className="mb-0">{paragraph}</Text>
</div>
</div>
</CardBody>

14
client/web/src/enterprise/batches/create/OldCreateBatchChangeContent.tsx
View File

@ -1,7 +1,7 @@
import React, { useCallback, useState } from 'react'
import { CodeSnippet } from '@sourcegraph/branded/src/components/CodeSnippet'
import { Container, Button, Link, Typography } from '@sourcegraph/wildcard'
import { Container, Button, Link, Typography, Text } from '@sourcegraph/wildcard'
import { SidebarGroup, SidebarGroupHeader } from '../../../components/Sidebar'
import combySample from '../batch-spec/edit/library/comby.batch.yaml'
@ -60,7 +60,7 @@ export const OldBatchChangePageContent: React.FunctionComponent<React.PropsWithC
<>
<Typography.H2>1. Write a batch spec YAML file</Typography.H2>
<Container className="mb-3">
<p className="mb-0">
<Text className="mb-0">
The batch spec (
<Link
to="/help/batch_changes/references/batch_spec_yaml_reference"
@ -71,7 +71,7 @@ export const OldBatchChangePageContent: React.FunctionComponent<React.PropsWithC
</Link>
) describes what the batch change does. You'll provide it when previewing, creating, and updating
batch changes. We recommend committing it to source control.
</p>
</Text>
</Container>
<div className="d-flex mb-3">
<div className="flex-shrink-0">
@ -93,22 +93,22 @@ export const OldBatchChangePageContent: React.FunctionComponent<React.PropsWithC
</div>
<Typography.H2>2. Preview the batch change with Sourcegraph CLI</Typography.H2>
<Container className="mb-3">
<p>
<Text>
Use the{' '}
<Link to="https://github.com/sourcegraph/src-cli" rel="noopener noreferrer" target="_blank">
Sourcegraph CLI (src)
</Link>{' '}
to preview the commits and changesets that your batch change will make:
</p>
</Text>
<CodeSnippet
code={`src batch preview -f ${getFileName(selectedSample.name)}`}
language="bash"
className="mb-3"
/>
<p className="mb-0">
<Text className="mb-0">
Follow the URL printed in your terminal to see the preview and (when you're ready) create the batch
change.
</p>
</Text>
</Container>
</>
)

6
client/web/src/enterprise/batches/detail/WebhookAlert.tsx
View File

@ -3,7 +3,7 @@ import React, { useCallback, useState } from 'react'
import classNames from 'classnames'
import { pluralize } from '@sourcegraph/common'
import { Button, useObservable, Link, Typography } from '@sourcegraph/wildcard'
import { Button, useObservable, Link, Typography, Text } from '@sourcegraph/wildcard'
import { authenticatedUser } from '../../../auth'
import { DismissibleAlert } from '../../../components/DismissibleAlert'
@ -54,7 +54,7 @@ export const WebhookAlert: React.FunctionComponent<React.PropsWithChildren<Props
<DismissibleAlert variant="warning" partialStorageKey={id}>
<div>
<Typography.H4>Changeset information may not be up to date</Typography.H4>
<p className={styles.blurb}>
<Text className={styles.blurb}>
Sourcegraph will poll for updates because{' '}
<Button className={classNames(styles.openLink, 'p-0')} onClick={toggleOpen} variant="link">
{totalCount}{' '}
@ -71,7 +71,7 @@ export const WebhookAlert: React.FunctionComponent<React.PropsWithChildren<Props
Ask your site admin <Link to={SITE_ADMIN_CONFIG_DOC_URL}>to configure webhooks</Link>.
</>
)}
</p>
</Text>
{open && (
<ul>
{nodes.map(codeHost => (

16
client/web/src/enterprise/batches/detail/bulk-operations/BulkOperationNode.tsx
View File

@ -11,7 +11,7 @@ import UploadIcon from 'mdi-react/UploadIcon'
import { ErrorMessage } from '@sourcegraph/branded/src/components/alerts'
import { pluralize } from '@sourcegraph/common'
import { BulkOperationState, BulkOperationType } from '@sourcegraph/shared/src/graphql-operations'
import { Badge, AlertLink, Link, Alert, Icon, Typography } from '@sourcegraph/wildcard'
import { Badge, AlertLink, Link, Alert, Icon, Typography, Text } from '@sourcegraph/wildcard'
import { Collapsible } from '../../../../components/Collapsible'
import { Timestamp } from '../../../../components/time/Timestamp'
@ -70,19 +70,21 @@ export const BulkOperationNode: React.FunctionComponent<React.PropsWithChildren<
<Badge variant="secondary" className="mb-2" as="p">
{node.changesetCount}
</Badge>
<p className="mb-0">{pluralize('changeset', node.changesetCount)}</p>
<Text className="mb-0">{pluralize('changeset', node.changesetCount)}</Text>
</div>
<div className={styles.bulkOperationNodeDivider} />
<div className="flex-grow-1 ml-3">
<Typography.H4>{OPERATION_TITLES[node.type]}</Typography.H4>
<p className="mb-0">
<Text className="mb-0">
<Link to={node.initiator.url}>{node.initiator.username}</Link> <Timestamp date={node.createdAt} />
</p>
</Text>
</div>
{node.state === BulkOperationState.PROCESSING && (
<div className={classNames(styles.bulkOperationNodeProgressBar, 'flex-grow-1 ml-3')}>
<meter value={node.progress} className="w-100" min={0} max={1} />
<p className="text-center mb-0">{Math.ceil(node.progress * 100)}%</p>
<Text alignment="center" className="mb-0">
{Math.ceil(node.progress * 100)}%
</Text>
</div>
)}
{node.state === BulkOperationState.FAILED && (
@ -108,7 +110,7 @@ export const BulkOperationNode: React.FunctionComponent<React.PropsWithChildren<
>
{node.errors.map((error, index) => (
<Alert className="mt-2" key={index} variant="danger">
<p>
<Text>
{error.changeset.__typename === 'HiddenExternalChangeset' ? (
<span className="text-muted">On hidden repository</span>
) : (
@ -123,7 +125,7 @@ export const BulkOperationNode: React.FunctionComponent<React.PropsWithChildren<
.
</>
)}
</p>
</Text>
{error.error && <ErrorMessage error={'```\n' + error.error + '\n```'} />}
</Alert>
))}

4
client/web/src/enterprise/batches/detail/changesets/CloseChangesetsModal.tsx
View File

@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react'
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
import { asError, isErrorLike } from '@sourcegraph/common'
import { Button, Modal, Typography } from '@sourcegraph/wildcard'
import { Button, Modal, Typography, Text } from '@sourcegraph/wildcard'
import { LoaderButton } from '../../../../components/LoaderButton'
import { Scalars } from '../../../../graphql-operations'
@ -40,7 +40,7 @@ export const CloseChangesetsModal: React.FunctionComponent<React.PropsWithChildr
return (
<Modal onDismiss={onCancel} aria-labelledby={MODAL_LABEL_ID}>
<Typography.H3 id={MODAL_LABEL_ID}>Close changesets</Typography.H3>
<p className="mb-4">Are you sure you want to close all the selected changesets on the code hosts?</p>
<Text className="mb-4">Are you sure you want to close all the selected changesets on the code hosts?</Text>
{isErrorLike(isLoading) && <ErrorAlert error={isLoading} />}
<div className="d-flex justify-content-end">
<Button

4
client/web/src/enterprise/batches/detail/changesets/CreateCommentModal.tsx
View File

@ -3,7 +3,7 @@ import React, { useCallback, useState } from 'react'
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
import { Form } from '@sourcegraph/branded/src/components/Form'
import { asError, isErrorLike } from '@sourcegraph/common'
import { Button, TextArea, Modal, Typography } from '@sourcegraph/wildcard'
import { Button, TextArea, Modal, Typography, Text } from '@sourcegraph/wildcard'
import { LoaderButton } from '../../../../components/LoaderButton'
import { Scalars } from '../../../../graphql-operations'
@ -50,7 +50,7 @@ export const CreateCommentModal: React.FunctionComponent<React.PropsWithChildren
return (
<Modal onDismiss={onCancel} aria-labelledby={LABEL_ID}>
<Typography.H3 id={LABEL_ID}>Post a bulk comment on changesets</Typography.H3>
<p className="mb-4">Use this feature to create a bulk comment on all the selected code hosts.</p>
<Text className="mb-4">Use this feature to create a bulk comment on all the selected code hosts.</Text>
{isErrorLike(isLoading) && <ErrorAlert error={isLoading} />}
<Form onSubmit={onSubmit}>
<div className="form-group">

4
client/web/src/enterprise/batches/detail/changesets/DetachChangesetsModal.tsx
View File

@ -3,7 +3,7 @@ import React, { useCallback, useState } from 'react'
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
import { asError, isErrorLike } from '@sourcegraph/common'
import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
import { Button, Modal, Typography } from '@sourcegraph/wildcard'
import { Button, Modal, Typography, Text } from '@sourcegraph/wildcard'
import { LoaderButton } from '../../../../components/LoaderButton'
import { Scalars } from '../../../../graphql-operations'
@ -45,7 +45,7 @@ export const DetachChangesetsModal: React.FunctionComponent<React.PropsWithChild
return (
<Modal onDismiss={onCancel} aria-labelledby={labelId}>
<Typography.H3 id={labelId}>Detach changesets</Typography.H3>
<p className="mb-4">Are you sure you want to detach the selected changesets?</p>
<Text className="mb-4">Are you sure you want to detach the selected changesets?</Text>
{isErrorLike(isLoading) && <ErrorAlert error={isLoading} />}
<div className="d-flex justify-content-end">
<Button

18
client/web/src/enterprise/batches/detail/changesets/EmptyChangesetListElement.tsx
View File

@ -1,29 +1,29 @@
import React from 'react'
import { Typography } from '@sourcegraph/wildcard'
import { Typography, Text } from '@sourcegraph/wildcard'
import styles from './EmptyChangesetListElement.module.scss'
export const EmptyChangesetListElement: React.FunctionComponent<React.PropsWithChildren<{}>> = () => (
<div className={styles.emptyChangesetListElementBody}>
<Typography.H2 className="text-center mb-4">This batch change does not contain changesets</Typography.H2>
<p>This can occur for several reasons:</p>
<p>
<Text>This can occur for several reasons:</Text>
<Text>
<strong>
The query specified in <span className="text-monospace">repositoriesMatchingQuery:</span> may not have
matched any repositories.
</strong>
</p>
<p>Test your query in the search bar and ensure it returns results.</p>
<p>
</Text>
<Text>Test your query in the search bar and ensure it returns results.</Text>
<Text>
<strong>
The code specified in <span className="text-monospace">steps:</span> may not have resulted in changes
being made.
</strong>
</p>
<p>
</Text>
<Text>
Try the command on a local instance of one of the repositories returned in your search results. Run{' '}
<span className="text-monospace">git status</span> and ensure it produced changed files.
</p>
</Text>
</div>
)

6
client/web/src/enterprise/batches/detail/changesets/EmptyDraftChangesetListElement.tsx
View File

@ -2,7 +2,7 @@ import React from 'react'
import { useLocation } from 'react-router'
import { Link, Typography } from '@sourcegraph/wildcard'
import { Link, Typography, Text } from '@sourcegraph/wildcard'
import styles from './EmptyDraftChangesetListElement.module.scss'
@ -12,9 +12,9 @@ export const EmptyDraftChangesetListElement: React.FunctionComponent<React.Props
<div className={styles.emptyDraftChangesetListElementBody}>
<Typography.H3>No changesets exist</Typography.H3>
<div className={styles.emptyDraftChangesetListElementContent}>
<p className="mt-2">
<Text className="mt-2">
This batch change is a draft. A batch spec must be executed and applied to create changesets.
</p>
</Text>
<Link to={`${location.pathname}/edit`}>Edit the most recent spec.</Link>
</div>
</div>

6
client/web/src/enterprise/batches/detail/changesets/ExternalChangesetNode.tsx
View File

@ -15,7 +15,7 @@ import { ExtensionsControllerProps } from '@sourcegraph/shared/src/extensions/co
import { ChangesetState } from '@sourcegraph/shared/src/graphql-operations'
import { ThemeProps } from '@sourcegraph/shared/src/theme'
import { RepoSpec, RevisionSpec, FileSpec, ResolvedRevisionSpec } from '@sourcegraph/shared/src/util/url'
import { Button, Alert, Icon, Typography } from '@sourcegraph/wildcard'
import { Button, Alert, Icon, Typography, Text } from '@sourcegraph/wildcard'
import { DiffStatStack } from '../../../../components/diff/DiffStat'
import { InputTooltip } from '../../../../components/InputTooltip'
@ -231,9 +231,9 @@ const SyncerError: React.FunctionComponent<React.PropsWithChildren<{ syncerError
</Typography.H4>
<ErrorMessage error={syncerError} />
<hr className="my-2" />
<p className="mb-0">
<Text className="mb-0">
<small>This might be an ephemeral error that resolves itself at the next sync.</small>
</p>
</Text>
</Alert>
)

4
client/web/src/enterprise/batches/detail/changesets/MergeChangesetsModal.tsx
View File

@ -3,7 +3,7 @@ import React, { useCallback, useState } from 'react'
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
import { Form } from '@sourcegraph/branded/src/components/Form'
import { asError, isErrorLike } from '@sourcegraph/common'
import { Button, Checkbox, Modal, Typography } from '@sourcegraph/wildcard'
import { Button, Checkbox, Modal, Typography, Text } from '@sourcegraph/wildcard'
import { LoaderButton } from '../../../../components/LoaderButton'
import { Scalars } from '../../../../graphql-operations'
@ -46,7 +46,7 @@ export const MergeChangesetsModal: React.FunctionComponent<React.PropsWithChildr
return (
<Modal onDismiss={onCancel} aria-labelledby={MODAL_LABEL_ID}>
<Typography.H3 id={MODAL_LABEL_ID}>Merge changesets</Typography.H3>
<p className="mb-4">Are you sure you want to attempt to merge all the selected changesets?</p>
<Text className="mb-4">Are you sure you want to attempt to merge all the selected changesets?</Text>
<Form>
<div className="form-group">
<Checkbox

6
client/web/src/enterprise/batches/detail/changesets/PublishChangesetsModal.tsx
View File

@ -3,7 +3,7 @@ import React, { useCallback, useState } from 'react'
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
import { Form } from '@sourcegraph/branded/src/components/Form'
import { asError, isErrorLike } from '@sourcegraph/common'
import { Button, Checkbox, Modal, Typography } from '@sourcegraph/wildcard'
import { Button, Checkbox, Modal, Typography, Text } from '@sourcegraph/wildcard'
import { LoaderButton } from '../../../../components/LoaderButton'
import { Scalars } from '../../../../graphql-operations'
@ -46,7 +46,9 @@ export const PublishChangesetsModal: React.FunctionComponent<React.PropsWithChil
return (
<Modal onDismiss={onCancel} aria-labelledby={MODAL_LABEL_ID}>
<Typography.H3 id={MODAL_LABEL_ID}>Publish changesets</Typography.H3>
<p className="mb-4">Are you sure you want to publish all the selected changesets to the code hosts?</p>
<Text className="mb-4">
Are you sure you want to publish all the selected changesets to the code hosts?
</Text>
<Form>
<div className="form-group">
<Checkbox

4
client/web/src/enterprise/batches/detail/changesets/ReenqueueChangesetsModal.tsx
View File

@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react'
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
import { asError, isErrorLike } from '@sourcegraph/common'
import { Button, Modal, Typography } from '@sourcegraph/wildcard'
import { Button, Modal, Typography, Text } from '@sourcegraph/wildcard'
import { LoaderButton } from '../../../../components/LoaderButton'
import { Scalars } from '../../../../graphql-operations'
@ -36,7 +36,7 @@ export const ReenqueueChangesetsModal: React.FunctionComponent<
return (
<Modal onDismiss={onCancel} aria-labelledby={LABEL_ID}>
<Typography.H3 id={LABEL_ID}>Re-enqueue changesets</Typography.H3>
<p className="mb-4">Are you sure you want to re-enqueue all the selected changesets?</p>
<Text className="mb-4">Are you sure you want to re-enqueue all the selected changesets?</Text>
{isErrorLike(isLoading) && <ErrorAlert error={isLoading} />}
<div className="d-flex justify-content-end">
<Button

6
client/web/src/enterprise/batches/global/DotcomGettingStartedPage.tsx
View File

@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
import classNames from 'classnames'
import { PageHeader, CardBody, Card } from '@sourcegraph/wildcard'
import { PageHeader, CardBody, Card, Text } from '@sourcegraph/wildcard'
import { BatchChangesIcon } from '../../../batches/icons'
import { CtaBanner } from '../../../components/CtaBanner'
@ -39,9 +39,9 @@ const DotcomGettingStartedPageFooter: React.FunctionComponent<React.PropsWithChi
<div className="d-flex justify-content-between">
<Card className={classNames(styles.requirementsCard, 'mr-3')}>
<CardBody>
<p>
<Text>
<strong>Batch Changes requirements</strong>
</p>
</Text>
<ul className={classNames(styles.narrowList, 'mb-0')}>
<li>On prem installation</li>
<li>Unlicensed users can create 5 changesets per batch change</li>

17
client/web/src/enterprise/batches/list/BatchChangeListPage.tsx
View File

@ -7,7 +7,16 @@ import { dataOrThrowErrors, useQuery } from '@sourcegraph/http-client'
import { Settings } from '@sourcegraph/shared/src/schema/settings.schema'
import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
import { PageHeader, CardBody, Card, Link, Container, Typography, screenReaderAnnounce } from '@sourcegraph/wildcard'
import {
PageHeader,
CardBody,
Card,
Link,
Container,
Typography,
Text,
screenReaderAnnounce,
} from '@sourcegraph/wildcard'
import { AuthenticatedUser } from '../../../auth'
import { isBatchChangesExecutionEnabled } from '../../../batches'
@ -245,9 +254,9 @@ const BatchChangeListEmptyElement: React.FunctionComponent<
React.PropsWithChildren<BatchChangeListEmptyElementProps>
> = ({ canCreate, location }) => (
<div className="w-100 py-5 text-center">
<p>
<Text>
<strong>No batch changes have been created.</strong>
</p>
</Text>
{canCreate ? <NewBatchChangeButton to={`${location.pathname}/create`} /> : null}
</div>
)
@ -310,7 +319,7 @@ const GettingStartedFooter: React.FunctionComponent<React.PropsWithChildren<{}>>
<div className="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3">
<Card>
<CardBody className="text-center">
<p>Create your first batch change</p>
<Text>Create your first batch change</Text>
<Typography.H2 className="mb-0">
<Link to="/help/batch_changes/quickstart" target="_blank" rel="noopener">
Batch Changes quickstart

10
client/web/src/enterprise/batches/list/BatchChangesListIntro.tsx
View File

@ -2,7 +2,7 @@ import React from 'react'
import classNames from 'classnames'
import { CardBody, Card, Link, Typography } from '@sourcegraph/wildcard'
import { CardBody, Card, Link, Typography, Text } from '@sourcegraph/wildcard'
import { SourcegraphIcon } from '../../../auth/icons'
@ -49,14 +49,14 @@ const BatchChangesUnlicensedAlert: React.FunctionComponent<React.PropsWithChildr
<SourcegraphIcon className="mr-3 col-2 mt-2 d-none d-sm-block" />
<div>
<Typography.H4>Batch changes trial</Typography.H4>
<p>
<Text>
Batch changes is a paid feature of Sourcegraph. All users can create sample batch changes with
up to five changesets without a license.
</p>
<p className="mb-0">
</Text>
<Text className="mb-0">
<Link to="https://about.sourcegraph.com/contact/sales/">Contact sales</Link> to obtain a trial
license.
</p>
</Text>
</div>
</CardBody>
</Card>

44
client/web/src/enterprise/batches/list/GettingStarted.tsx
View File

@ -2,7 +2,7 @@ import React from 'react'
import classNames from 'classnames'
import { Container, CardBody, Card, Link, Typography } from '@sourcegraph/wildcard'
import { Container, CardBody, Card, Link, Typography, Text } from '@sourcegraph/wildcard'
import styles from './GettingStarted.module.scss'
@ -41,11 +41,11 @@ export const GettingStarted: React.FunctionComponent<React.PropsWithChildren<Get
</div>
<div className="col-12 col-md-5">
<Typography.H2>Automate large-scale code changes</Typography.H2>
<p>
<Text>
Batch Changes gives you a declarative structure for finding and modifying code across all of
your repositories. Its simple UI makes it easy to track and manage all of your changesets
through checks and code reviews until each change is merged.
</p>
</Text>
<Typography.H3>Common use cases</Typography.H3>
<ul className={classNames(styles.narrowList, 'mb-0')}>
<li>Update configuration files across many repositories</li>
@ -72,10 +72,10 @@ export const GettingStarted: React.FunctionComponent<React.PropsWithChildren<Get
Finding and replacing exclusionary terms
</Link>
</Typography.H4>
<p className="text-muted mb-0">
<Text className="text-muted mb-0">
A Sourcegraph query plus a simple <Typography.Code>sed</Typography.Code> command creates
changesets required to manage a large scale change.
</p>
</Text>
</div>
</CardBody>
</Card>
@ -90,42 +90,42 @@ export const GettingStarted: React.FunctionComponent<React.PropsWithChildren<Get
Refactoring with language aware search
</Link>
</Typography.H4>
<p className="text-muted mb-0">
<Text className="text-muted mb-0">
Using{' '}
<Link to="https://comby.dev/" rel="noopener">
Comby's
</Link>{' '}
language-aware structural search to refactor Go statements to a semantically equivalent,
but clearer execution.
</p>
</Text>
</div>
</CardBody>
</Card>
</div>
<div className="col-12 mb-4 text-right">
<p>
<Text>
<Link to="/help/batch_changes/tutorials" rel="noopener">
More tutorials
</Link>
</p>
</Text>
</div>
</div>
<div className="row mb-5">
<div className="col-12 col-md-4 mt-3">
<p>
<Text>
<strong>Quickstart</strong>
</p>
<p>Create your first Sourcegraph batch change in 10 minutes or less.</p>
</Text>
<Text>Create your first Sourcegraph batch change in 10 minutes or less.</Text>
<Link to="/help/batch_changes/quickstart" rel="noopener">
Batch Changes quickstart
</Link>
</div>
<div className="col-12 col-md-4 mt-3">
<p>
<Text>
<strong>Documentation</strong>
</p>
<p>
</Text>
<Text>
Learn about the batch spec{' '}
<Link to="/help/batch_changes/references/batch_spec_yaml_reference" rel="noopener">
YAML reference
@ -140,18 +140,18 @@ export const GettingStarted: React.FunctionComponent<React.PropsWithChildren<Get
Batch Changes documentation
</Link>
.
</p>
</Text>
</div>
<div className="col-12 col-md-4">
<Card className={styles.overviewCard}>
<CardBody>
<p>
<Text>
<strong>Overview</strong>
</p>
<p>
</Text>
<Text>
View the product marketing page for a high-level overview of benefits and customer use
cases.
</p>
</Text>
{/*
a11y-ignore
Rule: "color-contrast" (Elements must have sufficient color contrast)
@ -165,10 +165,10 @@ export const GettingStarted: React.FunctionComponent<React.PropsWithChildren<Get
</div>
</div>
<Typography.H2>Batch changes demo</Typography.H2>
<p>
<Text>
This 2 minute demo provides an overview of batch changes from editing a specification to managing
changesets.
</p>
</Text>
<Container className="mb-3">
<iframe
title="Batch Changes demo"

10
client/web/src/enterprise/batches/preview/MissingCredentialsAlert.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'
import { pluralize } from '@sourcegraph/common'
import { Alert, Link } from '@sourcegraph/wildcard'
import { Alert, Link, Text } from '@sourcegraph/wildcard'
import { AuthenticatedUser } from '../../../auth'
import { ViewerBatchChangesCodeHostsFields } from '../../../graphql-operations'
@ -20,24 +20,24 @@ export const MissingCredentialsAlert: React.FunctionComponent<
}
return (
<Alert variant="warning">
<p>
<Text>
<strong>
You don't have credentials configured for{' '}
{pluralize('this code host', viewerBatchChangesCodeHosts.totalCount, 'these code hosts')}
</strong>
</p>
</Text>
<ul>
{viewerBatchChangesCodeHosts.nodes.map(node => (
<CodeHost {...node} key={node.externalServiceKind + node.externalServiceURL} />
))}
</ul>
<p className="mb-0">
<Text className="mb-0">
Credentials are required to publish changesets on code hosts. Configure them in your{' '}
<Link to={`${authenticatedUser.url}/settings/batch-changes`} target="_blank" rel="noopener">
batch changes user settings
</Link>{' '}
to apply this spec.
</p>
</Text>
</Alert>
)
}

18
client/web/src/enterprise/batches/preview/list/EmptyPreviewListElement.tsx
View File

@ -1,29 +1,29 @@
import React from 'react'
import { Typography } from '@sourcegraph/wildcard'
import { Typography, Text } from '@sourcegraph/wildcard'
import styles from './EmptyPreviewListElement.module.scss'
export const EmptyPreviewListElement: React.FunctionComponent<React.PropsWithChildren<{}>> = () => (
<div className={styles.emptyPreviewListElementBody}>
<Typography.H3 className="text-center mb-4">No changesets will be created by this batch change</Typography.H3>
<p>This can occur for several reasons:</p>
<p>
<Text>This can occur for several reasons:</Text>
<Text>
<strong>
The query specified in <span className="text-monospace">repositoriesMatchingQuery:</span> may not have
matched any repositories.
</strong>
</p>
<p>Test your query in the search bar and ensure it returns results.</p>
<p>
</Text>
<Text>Test your query in the search bar and ensure it returns results.</Text>
<Text>
<strong>
The code specified in <span className="text-monospace">steps:</span> may not have resulted in changes
being made.
</strong>
</p>
<p>
</Text>
<Text>
Try the command on a local instance of one of the repositories returned in your search results. Run{' '}
<span className="text-monospace">git status</span> and ensure it produced changed files.
</p>
</Text>
</div>
)

6
client/web/src/enterprise/batches/repo/BatchChangeRepoPage.tsx
View File

@ -4,7 +4,7 @@ import * as H from 'history'
import { displayRepoName } from '@sourcegraph/shared/src/components/RepoLink'
import { ThemeProps } from '@sourcegraph/shared/src/theme'
import { PageHeader, Typography, useObservable } from '@sourcegraph/wildcard'
import { PageHeader, Typography, Text, useObservable } from '@sourcegraph/wildcard'
import { BatchChangesIcon } from '../../../batches/icons'
import { DiffStat } from '../../../components/diff/DiffStat'
@ -72,9 +72,9 @@ export const BatchChangeRepoPage: React.FunctionComponent<React.PropsWithChildre
</div>
) : null}
{hasChangesets ? (
<p>
<Text>
Batch changes has created {stats?.changesetsStats.total} changesets on {repoDisplayName}
</p>
</Text>
) : (
<div className="mb-3" />
)}

18
client/web/src/enterprise/batches/settings/AddCredentialModal.tsx
View File

@ -4,7 +4,7 @@ import classNames from 'classnames'
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
import { Form } from '@sourcegraph/branded/src/components/Form'
import { Button, Modal, Link, Typography } from '@sourcegraph/wildcard'
import { Button, Modal, Link, Typography, Text } from '@sourcegraph/wildcard'
import { LoaderButton } from '../../../components/LoaderButton'
import { ExternalServiceKind, Scalars } from '../../../graphql-operations'
@ -151,9 +151,9 @@ export const AddCredentialModal: React.FunctionComponent<React.PropsWithChildren
{requiresSSH && (
<div className="d-flex w-100 justify-content-between mb-4">
<div className="flex-grow-1 mr-2">
<p className={classNames('mb-0 py-2', step === 'get-ssh-key' && 'text-muted')}>
<Text className={classNames('mb-0 py-2', step === 'get-ssh-key' && 'text-muted')}>
1. Add token
</p>
</Text>
<div
className={classNames(
styles.addCredentialModalModalStepRuler,
@ -162,9 +162,9 @@ export const AddCredentialModal: React.FunctionComponent<React.PropsWithChildren
/>
</div>
<div className="flex-grow-1 ml-2">
<p className={classNames('mb-0 py-2', step === 'add-token' && 'text-muted')}>
<Text className={classNames('mb-0 py-2', step === 'add-token' && 'text-muted')}>
2. Get SSH Key
</p>
</Text>
<div
className={classNames(
styles.addCredentialModalModalStepRuler,
@ -210,7 +210,7 @@ export const AddCredentialModal: React.FunctionComponent<React.PropsWithChildren
value={credential}
onChange={onChangeCredential}
/>
<p className="form-text">
<Text className="form-text">
<Link
to={HELP_TEXT_LINK_URL}
rel="noreferrer noopener"
@ -220,7 +220,7 @@ export const AddCredentialModal: React.FunctionComponent<React.PropsWithChildren
Create a new {patLabel.toLocaleLowerCase()}
</Link>{' '}
{scopeRequirements[externalServiceKind]}
</p>
</Text>
</div>
<div className="d-flex justify-content-end">
<Button
@ -247,10 +247,10 @@ export const AddCredentialModal: React.FunctionComponent<React.PropsWithChildren
)}
{step === 'get-ssh-key' && (
<>
<p>
<Text>
An SSH key has been generated for your batch changes code host connection. Copy the public
key below and enter it on your code host.
</p>
</Text>
<CodeHostSshPublicKey externalServiceKind={externalServiceKind} sshPublicKey={sshPublicKey!} />
<Button
className="test-add-credential-modal-submit float-right"

4
client/web/src/enterprise/batches/settings/BatchChangesSettingsArea.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import { PageHeader } from '@sourcegraph/wildcard'
import { PageHeader, Text } from '@sourcegraph/wildcard'
import { PageTitle } from '../../../components/PageTitle'
import { UserAreaUserFields } from '../../../graphql-operations'
@ -19,7 +19,7 @@ export const BatchChangesSettingsArea: React.FunctionComponent<
<PageTitle title="Batch changes settings" />
<PageHeader headingElement="h2" path={[{ text: 'Batch Changes settings' }]} className="mb-3" />
<UserCodeHostConnections
headerLine={<p>Add access tokens to enable Batch Changes changeset creation on your code hosts.</p>}
headerLine={<Text>Add access tokens to enable Batch Changes changeset creation on your code hosts.</Text>}
userID={props.user.id}
/>
</div>

4
client/web/src/enterprise/batches/settings/BatchChangesSiteConfigSettingsArea.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import { PageHeader, Alert } from '@sourcegraph/wildcard'
import { PageHeader, Alert, Text } from '@sourcegraph/wildcard'
import { PageTitle } from '../../../components/PageTitle'
@ -18,7 +18,7 @@ export const BatchChangesSiteConfigSettingsArea: React.FunctionComponent<
<GlobalCodeHostConnections
headerLine={
<>
<p>Add access tokens to enable Batch Changes changeset creation for all users.</p>
<Text>Add access tokens to enable Batch Changes changeset creation for all users.</Text>
<Alert variant="info">
You are configuring <strong>global credentials</strong> for Batch Changes. The credentials on
this page can be used by all users of this Sourcegraph instance to create and sync changesets.

6
client/web/src/enterprise/batches/settings/CodeHostConnections.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import { Container, Link, Typography } from '@sourcegraph/wildcard'
import { Container, Link, Typography, Text } from '@sourcegraph/wildcard'
import { UseConnectionResult } from '../../../components/FilteredConnection/hooks/useConnection'
import {
@ -77,13 +77,13 @@ const CodeHostConnections: React.FunctionComponent<React.PropsWithChildren<CodeH
</SummaryContainer>
)}
</ConnectionContainer>
<p className="mb-0">
<Text className="mb-0">
Code host not present? Site admins can add a code host in{' '}
<Link to="/help/admin/external_service" target="_blank" rel="noopener noreferrer">
the manage repositories settings
</Link>
.
</p>
</Text>
</Container>
)
}

6
client/web/src/enterprise/batches/settings/CodeHostSshPublicKey.tsx
View File

@ -4,7 +4,7 @@ import copy from 'copy-to-clipboard'
import { noop } from 'lodash'
import ContentCopyIcon from 'mdi-react/ContentCopyIcon'
import { Button, TextArea, Link, Icon, Typography } from '@sourcegraph/wildcard'
import { Button, TextArea, Link, Icon, Typography, Text } from '@sourcegraph/wildcard'
import { ExternalServiceKind } from '../../../graphql-operations'
@ -68,11 +68,11 @@ export const CodeHostSshPublicKey: React.FunctionComponent<React.PropsWithChildr
onChange={noop}
/>
{showInstructionsLink && (
<p>
<Text>
<Link to={configInstructionLinks[externalServiceKind]} target="_blank" rel="noopener">
Configuration instructions
</Link>
</p>
</Text>
)}
</>
)

4
client/web/src/enterprise/batches/settings/ModalHeader.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import { Typography } from '@sourcegraph/wildcard'
import { Typography, Text } from '@sourcegraph/wildcard'
import { defaultExternalServices } from '../../../components/externalServices/externalServices'
import { ExternalServiceKind } from '../../../graphql-operations'
@ -20,6 +20,6 @@ export const ModalHeader: React.FunctionComponent<React.PropsWithChildren<ModalH
<Typography.H3 id={id}>
Batch Changes credentials: {defaultExternalServices[externalServiceKind].defaultDisplayName}
</Typography.H3>
<p className="mb-4">{externalServiceURL}</p>
<Text className="mb-4">{externalServiceURL}</Text>
</>
)

6
client/web/src/enterprise/batches/settings/RemoveCredentialModal.tsx
View File

@ -1,7 +1,7 @@
import React, { useCallback } from 'react'
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
import { Button, Modal } from '@sourcegraph/wildcard'
import { Button, Modal, Text } from '@sourcegraph/wildcard'
import { LoaderButton } from '../../../components/LoaderButton'
import { BatchChangesCodeHostFields, BatchChangesCredentialFields } from '../../../graphql-operations'
@ -43,10 +43,10 @@ export const RemoveCredentialModal: React.FunctionComponent<React.PropsWithChild
{error && <ErrorAlert error={error} />}
<p>
<Text>
To create changesets on this code host after removing credentials, you will need to repeat the 'Add
credentials' process.
</p>
</Text>
{codeHost.requiresSSH && (
<CodeHostSshPublicKey

6
client/web/src/enterprise/code-monitoring/CodeMonitorInfo.tsx
View File

@ -4,7 +4,7 @@ import classNames from 'classnames'
import CloseIcon from 'mdi-react/CloseIcon'
import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary/useTemporarySetting'
import { Button, Alert, Icon } from '@sourcegraph/wildcard'
import { Button, Alert, Icon, Text } from '@sourcegraph/wildcard'
import styles from './CodeMonitorInfo.module.scss'
@ -18,14 +18,14 @@ export const CodeMonitorInfo: React.FunctionComponent<React.PropsWithChildren<{
return (
<Alert className={classNames('d-flex align-items-start', className)} variant="info">
<p className="mb-0">
<Text className="mb-0">
We currently recommend code monitors on repositories that don’t have a high commit traffic and for
non-critical use cases.
<br />
We are actively working on increasing the performance and fidelity of code monitors to support more
sensitive workloads, like a large number of repositories or auditing published code for secrets and
other security use cases.
</p>
</Text>
<Button
aria-label="Close alert"
variant="icon"

22
client/web/src/enterprise/code-monitoring/CodeMonitoringGettingStarted.tsx
View File

@ -4,7 +4,7 @@ import classNames from 'classnames'
import PlusIcon from 'mdi-react/PlusIcon'
import { ThemeProps } from '@sourcegraph/shared/src/theme'
import { Link, Button, CardBody, Card, Icon, Typography } from '@sourcegraph/wildcard'
import { Link, Button, CardBody, Card, Icon, Typography, Text } from '@sourcegraph/wildcard'
import { CodeMonitorSignUpLink } from './CodeMonitoringSignUpLink'
@ -78,10 +78,10 @@ export const CodeMonitoringGettingStarted: React.FunctionComponent<
<Typography.H2 className={classNames('mb-3', styles.heading)}>
Proactively monitor changes to your codebase
</Typography.H2>
<p className={classNames('mb-4')}>
<Text className={classNames('mb-4')}>
With code monitoring, you can automatically track changes made across multiple code hosts and
repositories.
</p>
</Text>
<Typography.H3>Common use cases</Typography.H3>
<ul>
@ -111,7 +111,7 @@ export const CodeMonitoringGettingStarted: React.FunctionComponent<
<Card className="h-100">
<CardBody className="d-flex flex-column">
<Typography.H3>{monitor.title}</Typography.H3>
<p className="text-muted flex-grow-1">{monitor.description}</p>
<Text className="text-muted flex-grow-1">{monitor.description}</Text>
<Link to={createCodeMonitorUrl(monitor)}>Create copy of monitor</Link>
</CardBody>
</Card>
@ -124,10 +124,10 @@ export const CodeMonitoringGettingStarted: React.FunctionComponent<
<div className="col-4">
<div>
<Typography.H4>Get started</Typography.H4>
<p className="text-muted">
<Text className="text-muted">
Craft searches that will monitor your code and trigger actions such as email
notifications.
</p>
</Text>
<Link to="/help/code_monitoring" className="link">
Code monitoring documentation
</Link>
@ -136,10 +136,10 @@ export const CodeMonitoringGettingStarted: React.FunctionComponent<
<div className="col-4">
<div>
<Typography.H4>Starting points and ideas</Typography.H4>
<p className="text-muted">
<Text className="text-muted">
Find specific examples of useful code monitors to keep on top of security and
consistency concerns.
</p>
</Text>
<Link to="/help/code_monitoring/how-tos/starting_points" className="link">
Explore starting points
</Link>
@ -149,9 +149,9 @@ export const CodeMonitoringGettingStarted: React.FunctionComponent<
<div className="col-4">
<div>
<Typography.H4>Questions and feedback</Typography.H4>
<p className="text-muted">
<Text className="text-muted">
Have a question or idea about code monitoring? We want to hear your feedback!
</p>
</Text>
<Link to="mailto:feedback@sourcegraph.com" className="link">
Share your thoughts
</Link>
@ -161,7 +161,7 @@ export const CodeMonitoringGettingStarted: React.FunctionComponent<
<div className="col-4">
<Card className={styles.signUpCard}>
<Typography.H4>Free for registered users</Typography.H4>
<p className="text-muted">Sign up and build your first code monitor today.</p>
<Text className="text-muted">Sign up and build your first code monitor today.</Text>
<CodeMonitorSignUpLink
className={styles.createButton}
eventName="SignUpPLGMonitor_GettingStarted"

6
client/web/src/enterprise/code-monitoring/CodeMonitoringLogs.tsx
View File

@ -3,7 +3,7 @@ import React, { useMemo } from 'react'
import classNames from 'classnames'
import { dataOrThrowErrors, gql } from '@sourcegraph/http-client'
import { Card, Typography } from '@sourcegraph/wildcard'
import { Card, Typography, Text } from '@sourcegraph/wildcard'
import { useConnection } from '../../components/FilteredConnection/hooks/useConnection'
import {
@ -138,13 +138,13 @@ export const CodeMonitoringLogs: React.FunctionComponent<
return (
<div>
<Typography.H2>Code Monitoring Logs</Typography.H2>
<p>
<Text>
{/* TODO: Text to change */}
You can use these logs to troubleshoot issues with code monitor notifications. Only the {
runPageSize
}{' '}
most recent runs are shown and old runs are deleted periodically.
</p>
</Text>
<Card className="p-3">
<ConnectionContainer>
{error && <ConnectionError errors={[error.message]} />}

6
client/web/src/enterprise/code-monitoring/components/DeleteMonitorModal.tsx
View File

@ -4,7 +4,7 @@ import { Observable, throwError } from 'rxjs'
import { mergeMap, startWith, tap, catchError } from 'rxjs/operators'
import { asError, isErrorLike } from '@sourcegraph/common'
import { Button, LoadingSpinner, useEventObservable, Modal, Alert, Typography } from '@sourcegraph/wildcard'
import { Button, LoadingSpinner, useEventObservable, Modal, Alert, Typography, Text } from '@sourcegraph/wildcard'
import { CodeMonitorFormProps } from './CodeMonitorForm'
@ -59,10 +59,10 @@ export const DeleteMonitorModal: React.FunctionComponent<React.PropsWithChildren
Delete code monitor?
</Typography.H3>
<p>
<Text>
<strong>This action cannot be undone.</strong> Code monitoring will no longer watch for trigger event
and all actions will immediately be removed.
</p>
</Text>
{(!deleteCompletedOrError || isErrorLike(deleteCompletedOrError)) && (
<div className="text-right">
<Button className="mr-2" onClick={toggleDeleteModal} outline={true} variant="secondary">

20
client/web/src/enterprise/codeintel/badge/components/IndexerSummary.tsx
View File

@ -5,7 +5,7 @@ import AlertIcon from 'mdi-react/AlertIcon'
import CheckIcon from 'mdi-react/CheckIcon'
import { isDefined } from '@sourcegraph/common'
import { Badge } from '@sourcegraph/wildcard'
import { Badge, Text } from '@sourcegraph/wildcard'
import { Timestamp } from '../../../../components/time/Timestamp'
import {
@ -74,12 +74,12 @@ export const IndexerSummary: React.FunctionComponent<React.PropsWithChildren<Ind
</div>
<div className="px-2 py-1">
<p className="mb-1">{summary.indexer?.name || summary.name} precise intelligence</p>
<Text className="mb-1">{summary.indexer?.name || summary.name} precise intelligence</Text>
{lastUpdated && (
<p className="mb-1 text-muted">
<Text className="mb-1 text-muted">
Last updated: <Timestamp date={lastUpdated} now={now} />
</p>
</Text>
)}
{summary.uploads.length + summary.indexes.length === 0 ? (
@ -101,12 +101,12 @@ export const IndexerSummary: React.FunctionComponent<React.PropsWithChildren<Ind
) : (
<>
{failedUploads.length === 0 && failedIndexes.length === 0 && (
<p className="mb-1 text-muted">
<Text className="mb-1 text-muted">
<CheckIcon size={16} className="text-success" /> Looks good!
</p>
</Text>
)}
{failedUploads.length > 0 && (
<p className="mb-1 text-muted">
<Text className="mb-1 text-muted">
<AlertIcon size={16} className="text-danger" />{' '}
<TelemetricLink
to={`/${repoName}/-/code-intelligence/uploads?filters=errored`}
@ -116,10 +116,10 @@ export const IndexerSummary: React.FunctionComponent<React.PropsWithChildren<Ind
className={telemetricRedirectClassName}
/>{' '}
failed
</p>
</Text>
)}
{failedIndexes.length > 0 && (
<p className="mb-1 text-muted">
<Text className="mb-1 text-muted">
<AlertIcon size={16} className="text-danger" />{' '}
<TelemetricLink
to={`/${repoName}/-/code-intelligence/indexes?filters=errored`}
@ -129,7 +129,7 @@ export const IndexerSummary: React.FunctionComponent<React.PropsWithChildren<Ind
className={telemetricRedirectClassName}
/>{' '}
failed
</p>
</Text>
)}
</>
)}

4
client/web/src/enterprise/codeintel/badge/components/Unsupported.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import { Badge } from '@sourcegraph/wildcard'
import { Badge, Text } from '@sourcegraph/wildcard'
export interface UnsupportedProps {}
@ -11,7 +11,7 @@ export const Unsupported: React.FunctionComponent<React.PropsWithChildren<Unsupp
<Badge variant="outlineSecondary">Unsupported</Badge>
</div>
<div className="px-2 py-1">
<p className="mb-0">No language detected</p>
<Text className="mb-0">No language detected</Text>
</div>
</div>
</div>

6
client/web/src/enterprise/codeintel/configuration/components/EmptyPoliciesList.tsx
View File

@ -2,10 +2,10 @@ import React from 'react'
import MapSearchIcon from 'mdi-react/MapSearchIcon'
import { Link } from '@sourcegraph/wildcard'
import { Link, Text } from '@sourcegraph/wildcard'
export const EmptyPoliciesList: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
<p className="text-muted text-center w-100 mb-0 mt-1" data-testid="summary">
<Text alignment="center" className="text-muted w-100 mb-0 mt-1" data-testid="summary">
<MapSearchIcon className="mb-2" />
<br />
{'No policies have been defined. Enable precise code intelligence by '}
@ -13,5 +13,5 @@ export const EmptyPoliciesList: React.FunctionComponent<React.PropsWithChildren<
configuring data retention policies
</Link>
.
</p>
</Text>
)

8
client/web/src/enterprise/codeintel/configuration/components/GitObjectPreview.tsx
View File

@ -4,7 +4,7 @@ import { ApolloError } from '@apollo/client'
import classNames from 'classnames'
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
import { Badge, LoadingSpinner, Typography } from '@sourcegraph/wildcard'
import { Badge, LoadingSpinner, Typography, Text } from '@sourcegraph/wildcard'
import { GitObjectType } from '../../../../graphql-operations'
import { GitObjectPreviewResult, usePreviewGitObjectFilter } from '../hooks/usePreviewGitObjectFilter'
@ -113,14 +113,14 @@ const GitObjectPreview: FunctionComponent<React.PropsWithChildren<GitObjectPrevi
{preview.preview.length === 0 ? (
<div className="mt-2 pt-2">
<div className={styles.empty}>
<p className="text-monospace">N/A</p>
<Text className="text-monospace">N/A</Text>
</div>
</div>
) : (
<div className="mt-2 pt-2">
<div className={classNames('bg-dark text-light p-2', styles.container)}>
{preview.preview.map(tag => (
<p key={`${tag.repoName}@${tag.name}`} className="text-monospace p-0 m-0">
<Text key={`${tag.repoName}@${tag.name}`} className="text-monospace p-0 m-0">
<span className="search-filter-keyword">repo:</span>
<span>{tag.repoName}</span>
<span className="search-filter-keyword">@</span>
@ -128,7 +128,7 @@ const GitObjectPreview: FunctionComponent<React.PropsWithChildren<GitObjectPrevi
<Badge variant="info" className="ml-4">
{tag.rev.slice(0, 7)}
</Badge>
</p>
</Text>
))}
</div>
</div>

12
client/web/src/enterprise/codeintel/configuration/components/RepositoryPreview.tsx
View File

@ -3,7 +3,7 @@ import { FunctionComponent } from 'react'
import classNames from 'classnames'
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
import { LoadingSpinner, Alert } from '@sourcegraph/wildcard'
import { LoadingSpinner, Alert, Text } from '@sourcegraph/wildcard'
import { usePreviewRepositoryFilter } from '../hooks/usePreviewRepositoryFilter'
@ -27,7 +27,7 @@ export const RepositoryPreview: FunctionComponent<React.PropsWithChildren<Reposi
) : (
preview && (
<>
<p>
<Text>
<small>
{preview.repositoryNames.length === 0
? 'Configuration policy does not match any known repositories.'
@ -37,13 +37,13 @@ export const RepositoryPreview: FunctionComponent<React.PropsWithChildren<Reposi
? `Configuration policy will be applied to ${preview.totalCount} repositories (showing ${preview.repositoryNames.length} below).`
: `Configuration policy will be applied to the following ${preview.repositoryNames.length} repositories.`}
</small>
</p>
</Text>
<div>
{preview.repositoryNames.length === 0 ? (
<div className="mt-2 pt-2">
<div className={styles.empty}>
<p className="text-monospace">N/A</p>
<Text className="text-monospace">N/A</Text>
</div>
</div>
) : (
@ -51,10 +51,10 @@ export const RepositoryPreview: FunctionComponent<React.PropsWithChildren<Reposi
<div className="mt-2 pt-2">
<div className={classNames('bg-dark text-light p-2', styles.container)}>
{preview.repositoryNames.map(name => (
<p key={`${name}`} className="text-monospace p-0 m-0">
<Text key={`${name}`} className="text-monospace p-0 m-0">
<span className="search-filter-keyword">repo:</span>
<span>{name}</span>
</p>
</Text>
))}
</div>
</div>

12
client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPage.tsx
View File

@ -9,7 +9,7 @@ import { Subject } from 'rxjs'
import { GitObjectType } from '@sourcegraph/shared/src/graphql-operations'
import { TelemetryProps, TelemetryService } from '@sourcegraph/shared/src/telemetry/telemetryService'
import { ThemeProps } from '@sourcegraph/shared/src/theme'
import { Container, PageHeader, Link, Typography } from '@sourcegraph/wildcard'
import { Container, PageHeader, Link, Typography, Text } from '@sourcegraph/wildcard'
import { AuthenticatedUser } from '../../../../auth'
import {
@ -186,16 +186,16 @@ export const PoliciesNode: FunctionComponent<React.PropsWithChildren<PoliciesNod
<div>
{indexingEnabled && !policy.retentionEnabled && !policy.indexingEnabled ? (
<p className="text-muted mt-2">Data retention and auto-indexing disabled.</p>
<Text className="text-muted mt-2">Data retention and auto-indexing disabled.</Text>
) : (
<>
<p className="mt-2">
<Text className="mt-2">
<RetentionPolicyDescription policy={policy} />
</p>
</Text>
{indexingEnabled && (
<p className="mt-2">
<Text className="mt-2">
<IndexingPolicyDescription policy={policy} />
</p>
</Text>
)}
</>
)}

6
client/web/src/enterprise/codeintel/indexes/components/EmptyAutoIndex.tsx
View File

@ -2,10 +2,10 @@ import React from 'react'
import MapSearchIcon from 'mdi-react/MapSearchIcon'
import { Link } from '@sourcegraph/wildcard'
import { Link, Text } from '@sourcegraph/wildcard'
export const EmptyAutoIndex: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
<p className="text-muted text-center w-100 mb-0 mt-1" data-testid="summary">
<Text alignment="center" className="text-muted w-100 mb-0 mt-1" data-testid="summary">
<MapSearchIcon className="mb-2" />
<br />
{'No indexes yet. Enable precise code intelligence by '}
@ -13,5 +13,5 @@ export const EmptyAutoIndex: React.FunctionComponent<React.PropsWithChildren<unk
auto-indexing LSIF data
</Link>
.
</p>
</Text>
)

6
client/web/src/enterprise/codeintel/uploads/components/EmptyDependencies.tsx
View File

@ -2,10 +2,12 @@ import React from 'react'
import MapSearchIcon from 'mdi-react/MapSearchIcon'
import { Text } from '@sourcegraph/wildcard'
export const EmptyDependencies: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
<p className="text-muted text-center w-100 mb-0 mt-1">
<Text alignment="center" className="text-muted w-100 mb-0 mt-1">
<MapSearchIcon className="mb-2" />
<br />
This upload has no dependencies.
</p>
</Text>
)

Some files were not shown because too many files have changed in this diff Show More