Skip to content

Commit e2269a7

Browse files
mattseddonmattseddon
authored
Reduce duplication in get started components (#1766)
* reduce get started component duplication * remove unused type * apply self review feedback
1 parent 524ba1b commit e2269a7

File tree

5 files changed

+116
-108
lines changed

5 files changed

+116
-108
lines changed

‎webview/src/experiments/components/Experiments.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,14 @@ import {
1919
} from 'react-table'
2020
import { MessageFromWebviewType } from 'dvc/src/webview/contract'
2121
import { Table } from './table/Table'
22-
import { GetStarted } from './GetStarted'
2322
import styles from './table/styles.module.scss'
23+
import { AddColumns, Welcome } from './GetStarted'
2424
import buildDynamicColumns from '../util/buildDynamicColumns'
2525
import { sendMessage } from '../../shared/vscode'
2626
import { useThemeVariables } from '../../shared/components/theme/Theme'
27-
import { EmptyState } from '../../shared/components/emptyState/EmptyState'
27+
import { GetStarted } from '../../shared/components/getStarted/GetStarted'
2828
import { DragDropProvider } from '../../shared/components/dragDrop/DragDropContext'
29+
import { EmptyState } from '../../shared/components/emptyState/EmptyState'
2930

3031
const DEFAULT_COLUMN_WIDTH = 75
3132
const MINIMUM_COLUMN_WIDTH = 50
@@ -205,7 +206,11 @@ export const ExperimentsTable: React.FC<{
205206
const hasOnlyWorkspace = data.length <= 1
206207
if (hasOnlyDefaultColumns || hasOnlyWorkspace) {
207208
return (
208-
<GetStarted hasOnlyWorkspace={hasOnlyWorkspace} hasColumns={hasColumns} />
209+
<GetStarted
210+
addItems={<AddColumns />}
211+
showEmpty={!hasColumns || hasOnlyWorkspace}
212+
welcome={<Welcome />}
213+
/>
209214
)
210215
}
211216

‎webview/src/experiments/components/GetStarted.tsx‎

Lines changed: 26 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,32 @@
11
import { MessageFromWebviewType } from 'dvc/src/webview/contract'
22
import React from 'react'
33
import { StartButton } from '../../shared/components/button/StartButton'
4-
import { EmptyState } from '../../shared/components/emptyState/EmptyState'
54
import { sendMessage } from '../../shared/vscode'
65

7-
export type GetStartedProps = {
8-
hasColumns: boolean
9-
hasOnlyWorkspace: boolean
10-
}
6+
export const AddColumns: React.FC = () => (
7+
<div>
8+
<p>No Columns Selected.</p>
9+
<StartButton
10+
onClick={() =>
11+
sendMessage({
12+
type: MessageFromWebviewType.SELECT_COLUMNS
13+
})
14+
}
15+
text="Add Columns"
16+
/>
17+
</div>
18+
)
1119

12-
export const GetStarted = ({
13-
hasColumns,
14-
hasOnlyWorkspace
15-
}: GetStartedProps) => {
16-
return (
17-
<EmptyState>
18-
{hasColumns && !hasOnlyWorkspace && (
19-
<div>
20-
<p>No Columns Selected.</p>
21-
<StartButton
22-
onClick={() =>
23-
sendMessage({
24-
type: MessageFromWebviewType.SELECT_COLUMNS
25-
})
26-
}
27-
text="Add Columns"
28-
/>
29-
</div>
30-
)}
31-
{(!hasColumns || hasOnlyWorkspace) && (
32-
<div>
33-
<p>No Experiments to Display.</p>
34-
<p>
35-
Get started with{' '}
36-
<a href="https://dvc.org/doc/start/experiments">experiments</a>.
37-
</p>
38-
<p>
39-
Learn about the{' '}
40-
<a href="https://dvc.org/doc/command-reference/exp">exp commands</a>
41-
.
42-
</p>
43-
</div>
44-
)}
45-
</EmptyState>
46-
)
47-
}
20+
export const Welcome: React.FC = () => (
21+
<div>
22+
<p>No Experiments to Display.</p>
23+
<p>
24+
Get started with{' '}
25+
<a href="https://dvc.org/doc/start/experiments">experiments</a>.
26+
</p>
27+
<p>
28+
Learn about the{' '}
29+
<a href="https://dvc.org/doc/command-reference/exp">exp commands</a>.
30+
</p>
31+
</div>
32+
)

‎webview/src/plots/components/GetStarted.tsx‎

Lines changed: 52 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,61 @@
11
import React from 'react'
22
import { MessageFromWebviewType } from 'dvc/src/webview/contract'
33
import { sendMessage } from '../../shared/vscode'
4-
import { EmptyState } from '../../shared/components/emptyState/EmptyState'
54
import { StartButton } from '../../shared/components/button/StartButton'
65

7-
export type GetStartedProps = {
8-
hasPlots?: boolean
9-
hasSelectedPlots?: boolean
10-
hasSelectedRevisions?: boolean
6+
const NoPlotsText: React.FC = () => <p>No Plots to Display.</p>
7+
8+
export type AddPlotsProps = {
9+
hasSelectedPlots: boolean
10+
hasSelectedRevisions: boolean
1111
}
1212

13-
export const GetStarted = ({
14-
hasPlots,
13+
export const AddPlots: React.FC<AddPlotsProps> = ({
1514
hasSelectedPlots,
1615
hasSelectedRevisions
17-
}: GetStartedProps) => {
18-
return (
19-
<EmptyState>
20-
<div>
21-
<p>No Plots to Display.</p>
22-
{hasPlots && (
23-
<div>
24-
{!hasSelectedPlots && (
25-
<StartButton
26-
onClick={() =>
27-
sendMessage({
28-
type: MessageFromWebviewType.SELECT_PLOTS
29-
})
30-
}
31-
text={'Add Plots'}
32-
/>
33-
)}
34-
{!hasSelectedRevisions && (
35-
<StartButton
36-
appearance={!hasSelectedPlots ? 'secondary' : 'primary'}
37-
isNested={!hasSelectedPlots}
38-
onClick={() =>
39-
sendMessage({
40-
type: MessageFromWebviewType.SELECT_EXPERIMENTS
41-
})
42-
}
43-
text={'Add Experiments'}
44-
/>
45-
)}
46-
</div>
47-
)}
48-
{!hasPlots && (
49-
<div>
50-
<p>
51-
{'Learn how to '}
52-
<a href="https://dvc.org/doc/studio/user-guide/views/visualize-experiments">
53-
visualize experiments
54-
</a>
55-
{' with DVC.'}
56-
</p>
57-
<p>
58-
{'Learn about the '}
59-
<a href="https://dvc.org/doc/command-reference/plots">
60-
plots commands
61-
</a>
62-
.
63-
</p>
64-
</div>
65-
)}
66-
</div>
67-
</EmptyState>
68-
)
69-
}
16+
}: AddPlotsProps) => (
17+
<div>
18+
<NoPlotsText />
19+
<div>
20+
{!hasSelectedPlots && (
21+
<StartButton
22+
onClick={() =>
23+
sendMessage({
24+
type: MessageFromWebviewType.SELECT_PLOTS
25+
})
26+
}
27+
text="Add Plots"
28+
/>
29+
)}
30+
{!hasSelectedRevisions && (
31+
<StartButton
32+
appearance={!hasSelectedPlots ? 'secondary' : 'primary'}
33+
isNested={!hasSelectedPlots}
34+
onClick={() =>
35+
sendMessage({
36+
type: MessageFromWebviewType.SELECT_EXPERIMENTS
37+
})
38+
}
39+
text="Add Experiments"
40+
/>
41+
)}
42+
</div>
43+
</div>
44+
)
45+
46+
export const Welcome: React.FC = () => (
47+
<div>
48+
<NoPlotsText />
49+
<p>
50+
Learn how to{' '}
51+
<a href="https://dvc.org/doc/studio/user-guide/views/visualize-experiments">
52+
visualize experiments
53+
</a>{' '}
54+
with DVC.
55+
</p>
56+
<p>
57+
Learn about the{' '}
58+
<a href="https://dvc.org/doc/command-reference/plots">plots commands</a>.
59+
</p>
60+
</div>
61+
)

‎webview/src/plots/components/Plots.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import VegaLite, { VegaLiteProps } from 'react-vega/lib/VegaLite'
55
import { Config } from 'vega-lite'
66
import styles from './styles.module.scss'
77
import { PlotsSizeProvider } from './PlotsSizeContext'
8-
import { GetStarted } from './GetStarted'
8+
import { AddPlots, Welcome } from './GetStarted'
99
import { CheckpointPlotsWrapper } from './checkpointPlots/CheckpointPlotsWrapper'
1010
import { TemplatePlotsWrapper } from './templatePlots/TemplatePlotsWrapper'
1111
import { ComparisonTableWrapper } from './comparisonTable/ComparisonTableWrapper'
@@ -16,6 +16,7 @@ import { useThemeVariables } from '../../shared/components/theme/Theme'
1616
import { DragDropProvider } from '../../shared/components/dragDrop/DragDropContext'
1717
import { sendMessage } from '../../shared/vscode'
1818
import { getThemeValue, ThemeProperty } from '../../util/styles'
19+
import { GetStarted } from '../../shared/components/getStarted/GetStarted'
1920

2021
interface PlotsProps {
2122
state: PlotsWebviewState
@@ -71,9 +72,14 @@ const PlotsContent = ({ state }: PlotsProps) => {
7172
if (!checkpointPlots && !templatePlots && !comparisonTable) {
7273
return (
7374
<GetStarted
74-
hasPlots={hasPlots}
75-
hasSelectedPlots={hasSelectedPlots}
76-
hasSelectedRevisions={hasSelectedRevisions}
75+
addItems={
76+
<AddPlots
77+
hasSelectedPlots={!!hasSelectedPlots}
78+
hasSelectedRevisions={!!hasSelectedRevisions}
79+
/>
80+
}
81+
showEmpty={!hasPlots}
82+
welcome={<Welcome />}
7783
/>
7884
)
7985
}

‎webview/src/shared/components/getStarted/GetStarted.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react'
2+
import { EmptyState } from '../emptyState/EmptyState'
3+
4+
export type GetStartedProps = {
5+
addItems: React.ReactNode
6+
showEmpty: boolean
7+
welcome: React.ReactNode
8+
}
9+
10+
export const GetStarted: React.FC<GetStartedProps> = ({
11+
addItems,
12+
welcome,
13+
showEmpty
14+
}: GetStartedProps) => {
15+
if (!showEmpty) {
16+
return <EmptyState>{addItems}</EmptyState>
17+
}
18+
19+
return <EmptyState>{welcome}</EmptyState>
20+
}

0 commit comments

Comments
 (0)