Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "Get Started" section to Setup #3943

Merged
merged 5 commits into from
May 22, 2023
Merged

Add "Get Started" section to Setup #3943

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e666203
Add section with broken button
julieg18 May 19, 2023
7ec6b17
Add missing empty state and correct broken button
julieg18 May 19, 2023
70f7a51
Add test
julieg18 May 19, 2023
3cd5615
Add integration test
julieg18 May 19, 2023
f7836a0
Merge branch 'main' into add-get-started-section
julieg18 May 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions extension/src/setup/webview/contract.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,15 @@ export type SetupData = {
}

export enum SetupSection {
GET_STARTED = 'get-started',
DVC = 'dvc',
EXPERIMENTS = 'experiments',
REMOTES = 'remotes',
STUDIO = 'studio'
}

export const DEFAULT_SECTION_COLLAPSED = {
[SetupSection.GET_STARTED]: false,
[SetupSection.DVC]: false,
[SetupSection.EXPERIMENTS]: false,
[SetupSection.REMOTES]: false,
Expand Down
2 changes: 2 additions & 0 deletions extension/src/setup/webview/messages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ export class WebviewMessages {
return commands.executeCommand(RegisteredCliCommands.INIT)
case MessageFromWebviewType.INITIALIZE_GIT:
return this.gitInit()
case MessageFromWebviewType.SHOW_WALKTHROUGH:
julieg18 marked this conversation as resolved.
Show resolved Hide resolved
return commands.executeCommand(RegisteredCommands.EXTENSION_GET_STARTED)
case MessageFromWebviewType.SHOW_SCM_PANEL:
return this.showScmForCommit()
case MessageFromWebviewType.SELECT_PYTHON_INTERPRETER:
Expand Down
18 changes: 18 additions & 0 deletions extension/src/test/suite/setup/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,24 @@ suite('Setup Test Suite', () => {
expect(mockExecuteCommand).to.be.calledWithExactly(showScmPanelCommand)
}).timeout(WEBVIEW_TEST_TIMEOUT)

it('should handle a show walkthrough message from the webview', async () => {
const { messageSpy, mockExecuteCommand, setup } = buildSetup(disposable)

const webview = await setup.showWebview()
await webview.isReady()

const mockMessageReceived = getMessageReceivedEmitter(webview)

messageSpy.resetHistory()
mockMessageReceived.fire({
type: MessageFromWebviewType.SHOW_WALKTHROUGH
})

expect(mockExecuteCommand).to.be.calledWithExactly(
RegisteredCommands.EXTENSION_GET_STARTED
)
}).timeout(WEBVIEW_TEST_TIMEOUT)

it('should handle a setup the workspace message from the webview', async () => {
const { messageSpy, mockExecuteCommand, setup } = buildSetup(disposable)

Expand Down
2 changes: 2 additions & 0 deletions extension/src/webview/contract.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export enum MessageFromWebviewType {
RESIZE_PLOTS = 'resize-plots',
SAVE_STUDIO_TOKEN = 'save-studio-token',
SHOW_EXPERIMENT_LOGS = 'show-experiment-logs',
SHOW_WALKTHROUGH = 'show-walkthrough',
STOP_EXPERIMENTS = 'stop-experiments',
SORT_COLUMN = 'sort-column',
TOGGLE_EXPERIMENT = 'toggle-experiment',
Expand Down Expand Up @@ -215,6 +216,7 @@ export type MessageFromWebview =
| { type: MessageFromWebviewType.CHECK_CLI_COMPATIBLE }
| { type: MessageFromWebviewType.INITIALIZE_DVC }
| { type: MessageFromWebviewType.INITIALIZE_GIT }
| { type: MessageFromWebviewType.SHOW_WALKTHROUGH }
| { type: MessageFromWebviewType.SHOW_SCM_PANEL }
| { type: MessageFromWebviewType.INSTALL_DVC }
| { type: MessageFromWebviewType.UPGRADE_DVC }
Expand Down
29 changes: 29 additions & 0 deletions webview/src/setup/components/App.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,7 @@ describe('App', () => {
projectInitialized: false,
sectionCollapsed: {
[SetupSection.DVC]: false,
[SetupSection.GET_STARTED]: true,
[SetupSection.EXPERIMENTS]: true,
[SetupSection.REMOTES]: true,
[SetupSection.STUDIO]: true
Expand Down Expand Up @@ -452,6 +453,26 @@ describe('App', () => {
})
})

describe('Get Started', () => {
it('should show a button that takes the user to the "Get Started" walkthrough', () => {
renderApp()

expect(
within(screen.getByTestId('get-started-section-details')).getAllByText(
'Get Started'
)
).toHaveLength(2)
const walkthroughButton = screen.getByText('Show Walkthrough')

expect(walkthroughButton).toBeInTheDocument()

fireEvent.click(walkthroughButton)
expect(mockPostMessage).toHaveBeenCalledWith({
type: MessageFromWebviewType.SHOW_WALKTHROUGH
})
})
})

describe('Experiments', () => {
it('should show a screen saying that dvc is not setup if the project is not initialized', () => {
renderApp({
Expand Down Expand Up @@ -701,6 +722,7 @@ describe('App', () => {
isStudioConnected: true,
sectionCollapsed: {
[SetupSection.DVC]: false,
[SetupSection.GET_STARTED]: true,
[SetupSection.EXPERIMENTS]: true,
[SetupSection.REMOTES]: true,
[SetupSection.STUDIO]: true
Expand All @@ -723,6 +745,7 @@ describe('App', () => {
isStudioConnected: true,
sectionCollapsed: {
[SetupSection.DVC]: true,
[SetupSection.GET_STARTED]: true,
[SetupSection.EXPERIMENTS]: false,
[SetupSection.REMOTES]: true,
[SetupSection.STUDIO]: true
Expand All @@ -745,6 +768,7 @@ describe('App', () => {
isStudioConnected: true,
sectionCollapsed: {
[SetupSection.DVC]: true,
[SetupSection.GET_STARTED]: true,
[SetupSection.EXPERIMENTS]: true,
[SetupSection.REMOTES]: true,
[SetupSection.STUDIO]: false
Expand All @@ -769,6 +793,7 @@ describe('App', () => {
remoteList: undefined,
sectionCollapsed: {
[SetupSection.DVC]: true,
[SetupSection.GET_STARTED]: true,
[SetupSection.EXPERIMENTS]: true,
[SetupSection.REMOTES]: false,
[SetupSection.STUDIO]: true
Expand All @@ -786,6 +811,7 @@ describe('App', () => {
remoteList: { demo: undefined, 'example-get-started': undefined },
sectionCollapsed: {
[SetupSection.DVC]: true,
[SetupSection.GET_STARTED]: true,
[SetupSection.EXPERIMENTS]: true,
[SetupSection.REMOTES]: false,
[SetupSection.STUDIO]: true
Expand All @@ -803,6 +829,7 @@ describe('App', () => {
remoteList: { demo: undefined, 'example-get-started': undefined },
sectionCollapsed: {
[SetupSection.DVC]: true,
[SetupSection.GET_STARTED]: true,
[SetupSection.EXPERIMENTS]: true,
[SetupSection.REMOTES]: false,
[SetupSection.STUDIO]: true
Expand All @@ -827,6 +854,7 @@ describe('App', () => {
},
sectionCollapsed: {
[SetupSection.DVC]: true,
[SetupSection.GET_STARTED]: true,
[SetupSection.EXPERIMENTS]: true,
[SetupSection.REMOTES]: false,
[SetupSection.STUDIO]: true
Expand Down Expand Up @@ -854,6 +882,7 @@ describe('App', () => {
},
sectionCollapsed: {
[SetupSection.DVC]: true,
[SetupSection.GET_STARTED]: true,
[SetupSection.EXPERIMENTS]: true,
[SetupSection.REMOTES]: false,
[SetupSection.STUDIO]: true
Expand Down
8 changes: 8 additions & 0 deletions webview/src/setup/components/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { Dvc } from './dvc/Dvc'
import { Experiments } from './experiments/Experiments'
import { Studio } from './studio/Studio'
import { SetupContainer } from './SetupContainer'
import { GetStarted } from './GetStarted'
import { Remotes } from './remotes/Remotes'
import { useVsCodeMessaging } from '../../shared/hooks/useVsCodeMessaging'
import { sendMessage } from '../../shared/vscode'
Expand Down Expand Up @@ -171,6 +172,13 @@ export const App: React.FC = () => {
>
<Dvc />
</SetupContainer>
<SetupContainer
sectionKey={SetupSection.GET_STARTED}
title="Get Started"
icon={TooltipIconType.INFO}
>
<GetStarted />
</SetupContainer>
<SetupContainer
sectionKey={SetupSection.EXPERIMENTS}
title="Experiments"
Expand Down
17 changes: 17 additions & 0 deletions webview/src/setup/components/GetStarted.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from 'react'
import { showWalkthrough } from './messages'
import { Button } from '../../shared/components/button/Button'
import { EmptyState } from '../../shared/components/emptyState/EmptyState'

export const GetStarted: React.FC = () => {
return (
<EmptyState isFullScreen={false}>
<h1>Get Started</h1>
<p>
New to the extension? Go through the walkthrough to familiarize yourself
with the different features.
</p>
<Button onClick={showWalkthrough} text="Show Walkthrough" />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One of the things that we've discussed when it comes to this section is avoiding circular references. Aka, user goes to the setup, clicks on "Show Walkthrough", sees first step is "Install DVC", clicks on "Setup", then gets taken right back to setup.

Currently, I don't think it feels broken since the walkthrough setup links take you to a different section with the other sections closed so we could, if everyone else agrees, merge as is.

I've posted ideas for the next steps in #3434 if anyone would like to join in the discussion :)

#3434 (comment)

</EmptyState>
)
}
4 changes: 4 additions & 0 deletions webview/src/setup/components/messages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import { MessageFromWebviewType } from 'dvc/src/webview/contract'
import { sendMessage } from '../../shared/vscode'

export const showWalkthrough = () => {
sendMessage({ type: MessageFromWebviewType.SHOW_WALKTHROUGH })
}

export const checkCompatibility = () => {
sendMessage({ type: MessageFromWebviewType.CHECK_CLI_COMPATIBLE })
}
Expand Down
1 change: 1 addition & 0 deletions webview/src/setup/components/shared/util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { updateSectionCollapsed } from '../../state/webviewSlice'

const getAllSections = (collapsed: boolean) => ({
[SetupSection.DVC]: collapsed,
[SetupSection.GET_STARTED]: collapsed,
[SetupSection.EXPERIMENTS]: collapsed,
[SetupSection.REMOTES]: collapsed,
[SetupSection.STUDIO]: collapsed
Expand Down
4 changes: 4 additions & 0 deletions webview/src/shared/components/sectionContainer/SectionDescription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ const sectionDescriptionTestIds = {
[PlotsSection.TEMPLATE_PLOTS]: 'tooltip-template-plots',
// Setup DVC
[SetupSection.DVC]: 'tooltip-setup-dvc',
// Setup Get Started
[SetupSection.GET_STARTED]: 'tooltip-setup-get-started',
// Setup Experiments
[SetupSection.EXPERIMENTS]: 'tooltip-setup-experiments',
// Setup Remote
Expand Down Expand Up @@ -55,6 +57,8 @@ export const SectionDescriptionMainText = {
.
</>
),
// Setup Get Started
[SetupSection.GET_STARTED]: <>Get started with the extension</>,
// Setup DVC
[SetupSection.DVC]: <>Configure the extension to start working with DVC.</>,
// Setup Experiments
Expand Down
4 changes: 4 additions & 0 deletions webview/src/stories/Setup.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const DEFAULT_DATA: SetupData = {
remoteList: undefined,
sectionCollapsed: {
[SetupSection.DVC]: false,
[SetupSection.GET_STARTED]: false,
[SetupSection.EXPERIMENTS]: false,
[SetupSection.REMOTES]: false,
[SetupSection.STUDIO]: true
Expand Down Expand Up @@ -161,6 +162,7 @@ NoRemoteSetup.args = getUpdatedArgs({
},
sectionCollapsed: {
[SetupSection.DVC]: true,
[SetupSection.GET_STARTED]: true,
[SetupSection.EXPERIMENTS]: true,
[SetupSection.REMOTES]: false,
[SetupSection.STUDIO]: true
Expand All @@ -178,6 +180,7 @@ ProjectRemoteSetup.args = getUpdatedArgs({
},
sectionCollapsed: {
[SetupSection.DVC]: true,
[SetupSection.GET_STARTED]: true,
[SetupSection.EXPERIMENTS]: true,
[SetupSection.REMOTES]: false,
[SetupSection.STUDIO]: true
Expand All @@ -198,6 +201,7 @@ MultiProjectRemoteSetup.args = getUpdatedArgs({
},
sectionCollapsed: {
[SetupSection.DVC]: true,
[SetupSection.GET_STARTED]: true,
[SetupSection.EXPERIMENTS]: true,
[SetupSection.REMOTES]: false,
[SetupSection.STUDIO]: true
Expand Down