mirror of
https://github.com/sourcegraph/sourcegraph.git
synced 2026-02-06 16:51:55 +00:00
Onboarding UI Fixes (#58788)
* Adds Release Labels to IDEs and Changes VSCode instructions * Modal Styles * Style Fixes * Hover state on grid * Adds JetBrains instructions placeholder and links SVG Ide Icons * Adds Breathing Animation * Adds video, adds rounded corners and color stroke * Copy and SVG icons on mngmt page * Typos * Fix Linting * Fix Linting * Fix Linting --------- Co-authored-by: Naman Kumar <naman@outlook.in>
This commit is contained in:
Daniel Marques
GitHub
parent
c9439d9456
commit
6cdadefe43
@ -241,6 +241,7 @@ ts_project(
|
||||
"src/cody/isCodyEnabled.tsx",
|
||||
"src/cody/management/CodyManagementPage.tsx",
|
||||
"src/cody/onboarding/CodyOnboarding.tsx",
|
||||
"src/cody/onboarding/instructions/JetBrains.tsx",
|
||||
"src/cody/onboarding/instructions/VsCode.tsx",
|
||||
"src/cody/search/CodySearchPage.tsx",
|
||||
"src/cody/search/api.ts",
|
||||
|
||||
@ -24,6 +24,8 @@ interface CodyPlatformCardProps {
|
||||
illustration: string
|
||||
}
|
||||
|
||||
/* eslint-disable @sourcegraph/sourcegraph/check-help-links */
|
||||
|
||||
const onSpeakToAnEngineer = (): void => eventLogger.log(EventName.SPEAK_TO_AN_ENGINEER_CTA)
|
||||
const onClickCTAButton = (type: string): void =>
|
||||
eventLogger.log('SignupInitiated', { type, source: 'cody-signed-out' }, { type, page: 'cody-signed-out' })
|
||||
|
||||
@ -18,6 +18,8 @@ type ConversationScope = 'general' | 'repo'
|
||||
|
||||
const DEFAULT_VERTICAL_OFFSET = '1rem'
|
||||
|
||||
/* eslint-disable @sourcegraph/sourcegraph/check-help-links */
|
||||
|
||||
export const GettingStarted: React.FC<
|
||||
Pick<
|
||||
CodyChatStore,
|
||||
|
||||
@ -232,7 +232,7 @@ export const CodyManagementPage: React.FunctionComponent<CodyManagementPageProps
|
||||
<div>
|
||||
<img
|
||||
alt={editor.name}
|
||||
src={`https://storage.googleapis.com/sourcegraph-assets/cody-ide-icons/${editor.icon}.png`}
|
||||
src={`https://storage.googleapis.com/sourcegraph-assets/ideIcons/ideIcon${editor.icon}.svg`}
|
||||
width={34}
|
||||
className="mr-2"
|
||||
/>
|
||||
|
||||
@ -1,7 +1,90 @@
|
||||
.modal {
|
||||
width: 50rem;
|
||||
width: 54rem;
|
||||
border-radius: 6px;
|
||||
background-image: repeating-conic-gradient(
|
||||
rgba(112, 72, 232, 0.5) 50%,
|
||||
rgba(0, 203, 236, 0.5) 75%,
|
||||
rgba(161, 18, 255, 0.5) 100%,
|
||||
rgba(255, 85, 67, 0.5) 125%,
|
||||
rgba(112, 72, 232, 0.5) 150%
|
||||
);
|
||||
background-origin: border-box;
|
||||
|
||||
/* to allow a gradient stroke, this is actually where the color of the background is set */
|
||||
box-shadow: inset 0 100vw var(--theme-bg-plain);
|
||||
|
||||
/* to let the gradient on the background act as a stroke */
|
||||
border: 1px solid transparent;
|
||||
|
||||
/* to let gradient shadow be behind the modal */
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
/* Colorful shadow on the modali */
|
||||
.modal::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
height: 2.8125rem;
|
||||
background: linear-gradient(90deg, #7048e8 0%, #4ac1e8 32.21%, #4d0b79 65.39%, #ff5543 104.43%), #eff2f5;
|
||||
transform: translateZ(-1px);
|
||||
filter: blur(30px);
|
||||
opacity: 0.9;
|
||||
animation: modal-shadow 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes modal-shadow {
|
||||
0% {
|
||||
transform: translateY(0) translateZ(-1px);
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-25px) translateZ(-1px);
|
||||
opacity: 0.9;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0) translateZ(-1px);
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
[data-reach-dialog-overlay] {
|
||||
background: linear-gradient(180deg, rgba(17, 20, 27, 0.92) 0%, rgba(13, 16, 25, 0.92) 100%);
|
||||
backdrop-filter: blur(7px);
|
||||
}
|
||||
|
||||
.highlight-step {
|
||||
background: radial-gradient(50% 100% at 50% 100%, var(--gray-09) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-image: repeating-conic-gradient(
|
||||
rgba(112, 72, 232, 0.3) 50%,
|
||||
rgba(0, 203, 236, 0.3) 75%,
|
||||
rgba(161, 18, 255, 0.5) 100%,
|
||||
rgba(255, 85, 67, 0.3) 125%,
|
||||
#7048e8 150%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
[data-reach-dialog-overlay] {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(244, 244, 244, 0.9) 100%);
|
||||
backdrop-filter: blur(7px);
|
||||
}
|
||||
|
||||
.highlight-step {
|
||||
background: radial-gradient(50% 100% at 50% 100%, var(--gray-04) 0%, transparent 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.release-stage {
|
||||
color: var(--gray-07);
|
||||
}
|
||||
|
||||
/* Step section on instructions */
|
||||
.step {
|
||||
background: #343a4d;
|
||||
color: #ffffff;
|
||||
@ -9,6 +92,17 @@
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ide-grid:hover {
|
||||
background: var(--subtle-bg);
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.instructions-container {
|
||||
/* adds vertical scroll to long instructions and prevents "next" and "back buttons" to be under the fold */
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.responsive-container {
|
||||
@media (--sm-breakpoint-down) {
|
||||
flex-direction: column;
|
||||
@ -24,3 +118,74 @@
|
||||
.ide-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Initial welcome */
|
||||
|
||||
.welcome-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: 2.5s fadeInUp;
|
||||
}
|
||||
|
||||
.fade-first {
|
||||
animation-delay: 3s;
|
||||
opacity: 0;
|
||||
|
||||
/* to keep opacity */
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.fade-second {
|
||||
animation-delay: 3.2s;
|
||||
opacity: 0;
|
||||
|
||||
/* to keep opacity */
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.fade-third {
|
||||
animation-delay: 4s;
|
||||
opacity: 0;
|
||||
|
||||
/* to keep opacity */
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.welcome-video {
|
||||
animation: 2.5s moveUp 3s;
|
||||
transform: translateY(70%);
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes moveUp {
|
||||
0% {
|
||||
transform: translateY(70%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-up-animation {
|
||||
animation: 1.5s fadeInUp;
|
||||
}
|
||||
|
||||
@ -3,12 +3,12 @@ import React, { useState, useEffect } from 'react'
|
||||
import classNames from 'classnames'
|
||||
|
||||
import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary'
|
||||
import { Modal, H1, H2, H3, Text, Button, useSearchParameters } from '@sourcegraph/wildcard'
|
||||
import { Modal, H5, H2, H3, Text, Button, useSearchParameters } from '@sourcegraph/wildcard'
|
||||
|
||||
import { eventLogger } from '../../tracking/eventLogger'
|
||||
import { EventName } from '../../util/constants'
|
||||
import { CodyColorIcon } from '../chat/CodyPageIcon'
|
||||
|
||||
import { JetBrainsInstructions } from './instructions/JetBrains'
|
||||
import { VSCodeInstructions } from './instructions/VsCode'
|
||||
|
||||
import styles from './CodyOnboarding.module.scss'
|
||||
@ -17,31 +17,37 @@ export interface IEditor {
|
||||
icon: string
|
||||
name: string
|
||||
publisher: string
|
||||
releaseStage: string
|
||||
instructions?: React.FC<{ onBack?: () => void; onClose: () => void; showStep?: number }>
|
||||
}
|
||||
|
||||
export const editorGroups: IEditor[][] = [
|
||||
[
|
||||
{
|
||||
icon: 'VSCode',
|
||||
icon: 'VsCode',
|
||||
name: 'VS Code',
|
||||
publisher: 'Microsoft',
|
||||
releaseStage: 'Stable',
|
||||
instructions: VSCodeInstructions,
|
||||
},
|
||||
{
|
||||
icon: 'IntelliJ',
|
||||
name: 'IntelliJ IDEA',
|
||||
publisher: 'JetBrains',
|
||||
releaseStage: 'Beta',
|
||||
instructions: JetBrainsInstructions,
|
||||
},
|
||||
{
|
||||
icon: 'Neovim',
|
||||
icon: 'NeoVim',
|
||||
name: 'Neovim',
|
||||
publisher: 'Neovim Team',
|
||||
releaseStage: 'Experimental',
|
||||
},
|
||||
{
|
||||
icon: 'AndroidStudio',
|
||||
name: 'Android Studio',
|
||||
publisher: 'Google',
|
||||
releaseStage: 'Beta',
|
||||
},
|
||||
],
|
||||
[
|
||||
@ -49,21 +55,25 @@ export const editorGroups: IEditor[][] = [
|
||||
icon: 'PhpStorm',
|
||||
name: 'PhpStorm ',
|
||||
publisher: 'JetBrains',
|
||||
releaseStage: 'Beta',
|
||||
},
|
||||
{
|
||||
icon: 'PyCharm',
|
||||
name: 'PyCharm',
|
||||
publisher: 'Jetbrains',
|
||||
releaseStage: 'Beta',
|
||||
},
|
||||
{
|
||||
icon: 'WebStorm',
|
||||
name: 'WebStorm',
|
||||
publisher: 'JetBrains',
|
||||
releaseStage: 'Beta',
|
||||
},
|
||||
{
|
||||
icon: 'RubyMine',
|
||||
name: 'RubyMine',
|
||||
publisher: 'JetBrains',
|
||||
releaseStage: 'Beta',
|
||||
},
|
||||
],
|
||||
[
|
||||
@ -71,11 +81,13 @@ export const editorGroups: IEditor[][] = [
|
||||
icon: 'GoLand',
|
||||
name: 'GoLand',
|
||||
publisher: 'JetBrains',
|
||||
releaseStage: 'Beta',
|
||||
},
|
||||
{
|
||||
icon: 'Emacs',
|
||||
name: 'Emacs',
|
||||
publisher: 'Free Software Foundation',
|
||||
releaseStage: 'Coming Soon',
|
||||
},
|
||||
],
|
||||
]
|
||||
@ -111,12 +123,21 @@ function WelcomeStep({ onNext, pro }: { onNext: () => void; pro: boolean }): JSX
|
||||
}, [pro])
|
||||
|
||||
return (
|
||||
<div className="d-flex flex-column align-items-center">
|
||||
<CodyColorIcon width={60} height={60} className="mb-4" />
|
||||
<H1>Welcome {pro ? 'to Cody Pro Trial' : 'to Cody by Sourcegraph!'}</H1>
|
||||
<Text className="mb-4 pb-4">Let's walk through a few quick steps to get you started with Cody.</Text>
|
||||
<Button onClick={onNext} variant="primary" size="sm">
|
||||
Let's Start!
|
||||
<div className={classNames('d-flex flex-column align-items-center p-5')}>
|
||||
<video width="180" className={classNames('mb-5', styles.welcomeVideo)} autoPlay={true} muted={true}>
|
||||
<source src="https://storage.googleapis.com/sourcegraph-assets/codyWelcomeAnim.mp4" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<Text className={classNames('mb-4 pb-4', styles.fadeIn, styles.fadeSecond, styles.welcomeSubtitle)}>
|
||||
Ready to breeze through the basics and get comfortable with Cody{pro ? ' to Cody Pro Trial' : ''}?
|
||||
</Text>
|
||||
<Button
|
||||
onClick={onNext}
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className={classNames(styles.fadeIn, styles.fadeThird)}
|
||||
>
|
||||
Sure, let's dive in!
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
@ -131,7 +152,7 @@ function PurposeStep({ onNext, pro }: { onNext: () => void; pro: boolean }): JSX
|
||||
<>
|
||||
<div className="border-bottom pb-3 mb-3">
|
||||
<H2 className="mb-1">What are you using Cody for?</H2>
|
||||
<Text className="mb-0" size="small">
|
||||
<Text className="mb-0 text-muted" size="small">
|
||||
This will allow us to understand our audience better and guide your journey
|
||||
</Text>
|
||||
</div>
|
||||
@ -203,7 +224,7 @@ function EditorStep({
|
||||
<>
|
||||
<div className="border-bottom pb-3 mb-3">
|
||||
<H2 className="mb-1">Choose your editor</H2>
|
||||
<Text className="mb-0" size="small">
|
||||
<Text className="mb-0 text-muted" size="small">
|
||||
Most of Cody experience happens in the IDE. Let's get that set up.
|
||||
</Text>
|
||||
</div>
|
||||
@ -218,7 +239,7 @@ function EditorStep({
|
||||
{group.map((editor, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={classNames('d-flex flex-column flex-1 p-3 cursor-pointer', {
|
||||
className={classNames('d-flex flex-column flex-1 p-3 cursor-pointer', styles.ideGrid, {
|
||||
'border-left': index !== 0,
|
||||
})}
|
||||
role="button"
|
||||
@ -239,13 +260,13 @@ function EditorStep({
|
||||
setEditor(editor)
|
||||
}}
|
||||
>
|
||||
<div className="d-flex">
|
||||
<div className="d-flex align-items-center">
|
||||
<div>
|
||||
<img
|
||||
alt={editor.name}
|
||||
src={`https://storage.googleapis.com/sourcegraph-assets/cody-ide-icons/${editor.icon}.png`}
|
||||
src={`https://storage.googleapis.com/sourcegraph-assets/ideIcons/ideIcon${editor.icon}.svg`}
|
||||
width={34}
|
||||
className="mr-2"
|
||||
className="mr-3"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@ -253,6 +274,7 @@ function EditorStep({
|
||||
{editor.publisher}
|
||||
</Text>
|
||||
<Text className={classNames('mb-0', styles.ideName)}>{editor.name}</Text>
|
||||
<H5 className={styles.releaseStage}>{editor.releaseStage}</H5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
207
client/web/src/cody/onboarding/instructions/JetBrains.tsx
Normal file
207
client/web/src/cody/onboarding/instructions/JetBrains.tsx
Normal file
@ -0,0 +1,207 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
import classNames from 'classnames'
|
||||
|
||||
import { H2, Text, Button, ButtonLink, Link } from '@sourcegraph/wildcard'
|
||||
|
||||
import styles from '../CodyOnboarding.module.scss'
|
||||
|
||||
export function JetBrainsInstructions({
|
||||
onBack,
|
||||
onClose,
|
||||
showStep,
|
||||
}: {
|
||||
onBack?: () => void
|
||||
onClose: () => void
|
||||
showStep?: number
|
||||
}): JSX.Element {
|
||||
const [step, setStep] = useState<number>(showStep || 0)
|
||||
|
||||
return (
|
||||
<>
|
||||
{step === 0 && (
|
||||
<>
|
||||
<div className="pb-3 border-bottom">
|
||||
<H2>Setup instructions for JetBrains</H2>
|
||||
</div>
|
||||
|
||||
<div className={classNames('pt-3 px-3', styles.instructionsContainer)}>
|
||||
<div className={classNames('border-bottom', styles.highlightStep)}>
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="mr-1">
|
||||
<div className={classNames('mr-2', styles.step)}>1</div>
|
||||
</div>
|
||||
<div>
|
||||
<Text className="mb-1" weight="bold">
|
||||
Open the Plugins Page
|
||||
</Text>
|
||||
<Text className="text-muted mb-0" size="small">
|
||||
Click the Cog icon in the top right corner of your IDE and select{' '}
|
||||
<strong>Plugins</strong>
|
||||
Alternatively you can go to the settings option (use ⌘ + , for macOS, or File →
|
||||
Settings for Windows), then select "Plugins" from the menu on the left.
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex flex-column justify-content-center align-items-center mt-4">
|
||||
<ButtonLink
|
||||
variant="primary"
|
||||
to="https://marketplace.visualstudio.com/items?itemName=sourcegraph.cody-ai"
|
||||
>
|
||||
Open Marketplace
|
||||
</ButtonLink>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 border-bottom">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="mr-1">
|
||||
<div className={classNames('mr-2', styles.step)}>2</div>
|
||||
</div>
|
||||
<div>
|
||||
<Text className="mb-1" weight="bold">
|
||||
Install the Cody Plugin
|
||||
</Text>
|
||||
<Text className="text-muted mb-0" size="small">
|
||||
Type "Cody" in the search bar and install the plugin.
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex flex-column justify-content-center align-items-center mt-4" />
|
||||
<div className="mt-3 border-bottom">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="mr-1">
|
||||
<div className={classNames('mr-2', styles.step)}>3</div>
|
||||
</div>
|
||||
<div>
|
||||
<Text className="mb-1" weight="bold">
|
||||
Open the Plugin and Login
|
||||
</Text>
|
||||
<Text className="text-muted mb-0" size="small">
|
||||
Cody will be available on the right side of your IDE. Click the Cody icon to
|
||||
open the sidebar and login. Alternatively, you should get a notification
|
||||
that you need to login to Cody.
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex flex-column justify-content-center align-items-center mt-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showStep === undefined ? (
|
||||
<div className="mt-3 d-flex justify-content-between">
|
||||
<Button variant="secondary" onClick={onBack} outline={true} size="sm">
|
||||
Back
|
||||
</Button>
|
||||
<Button variant="primary" onClick={() => setStep(1)} size="sm">
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-3 d-flex justify-content-end">
|
||||
<Button variant="primary" onClick={onClose} size="sm">
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{step === 1 && (
|
||||
<>
|
||||
<div className="mb-3 pb-3 border-bottom">
|
||||
<H2>Cody Features</H2>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
<div className="flex-1 p-3 border-right d-flex flex-column justify-content-center align-items-center">
|
||||
<Text className="mb-1 w-100" weight="bold">
|
||||
Autocomplete
|
||||
</Text>
|
||||
<Text className="mb-0 w-100 text-muted" size="small">
|
||||
Cody will autocomplete your code as you type
|
||||
</Text>
|
||||
<img
|
||||
alt="Cody Autocomplete"
|
||||
width="90%"
|
||||
className="mt-4"
|
||||
src="https://storage.googleapis.com/sourcegraph-assets/VSCodeInstructions/autoCompleteIllustration.svg"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 p-3 d-flex flex-column justify-content-center align-items-center">
|
||||
<Text className="mb-1 w-100" weight="bold">
|
||||
Chat
|
||||
</Text>
|
||||
<Text className="mb-0 text-muted w-100" size="small">
|
||||
Cody will autocomplete your code as you type
|
||||
</Text>
|
||||
<img
|
||||
alt="Cody Chat"
|
||||
width="80%"
|
||||
className="mt-4"
|
||||
src="https://storage.googleapis.com/sourcegraph-assets/VSCodeInstructions/chatIllustration.svg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex my-3 py-3 border-top border-bottom">
|
||||
<div className="flex-1 p-3 border-right d-flex flex-column justify-content-center align-items-center">
|
||||
<Text className="mb-1 w-100" weight="bold">
|
||||
Commands
|
||||
</Text>
|
||||
<Text className="mb-0 text-muted w-100" size="small">
|
||||
Cody will autocomplete your code as you type
|
||||
</Text>
|
||||
<img
|
||||
alt="Cody Commands"
|
||||
width="80%"
|
||||
className="mt-4"
|
||||
src="https://storage.googleapis.com/sourcegraph-assets/VSCodeInstructions/commandsIllustration.svg"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 p-3 d-flex flex-column justify-content-center align-items-center">
|
||||
<Text className="mb-1 w-100" weight="bold">
|
||||
Feedback
|
||||
</Text>
|
||||
<Text className="mb-0 text-muted w-100" size="small">
|
||||
Cody will autocomplete your code as you type
|
||||
</Text>
|
||||
<Link to="https://discord.gg/rDPqBejz93" className="d-flex w-100 justify-content-center">
|
||||
<img
|
||||
alt="Discord Feedback"
|
||||
width="50%"
|
||||
className="mt-4"
|
||||
src="https://storage.googleapis.com/sourcegraph-assets/VSCodeInstructions/discordCTA.svg"
|
||||
/>
|
||||
</Link>
|
||||
<Link
|
||||
to="https://github.com/sourcegraph/cody/discussions/new?category=product-feedback"
|
||||
className="d-flex w-100 justify-content-center"
|
||||
>
|
||||
<img
|
||||
alt="GitHub Feedback"
|
||||
width="50%"
|
||||
className="mt-4"
|
||||
src="https://storage.googleapis.com/sourcegraph-assets/VSCodeInstructions/feedbackCTA.svg"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{showStep === undefined ? (
|
||||
<div className="mt-3 d-flex justify-content-between">
|
||||
<Button variant="secondary" onClick={() => setStep(0)} outline={true} size="sm">
|
||||
Back
|
||||
</Button>
|
||||
<Button variant="primary" onClick={onClose} size="sm">
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-3 d-flex justify-content-end">
|
||||
<Button variant="primary" onClick={onClose} size="sm">
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -2,7 +2,7 @@ import { useState } from 'react'
|
||||
|
||||
import classNames from 'classnames'
|
||||
|
||||
import { H2, Text, Button, ButtonLink } from '@sourcegraph/wildcard'
|
||||
import { H2, Text, Button, ButtonLink, Link } from '@sourcegraph/wildcard'
|
||||
|
||||
import styles from '../CodyOnboarding.module.scss'
|
||||
|
||||
@ -21,70 +21,91 @@ export function VSCodeInstructions({
|
||||
<>
|
||||
{step === 0 && (
|
||||
<>
|
||||
<div className="mb-3 pb-3 border-bottom">
|
||||
<div className="pb-3 border-bottom">
|
||||
<H2>Setup instructions for VS Code</H2>
|
||||
</div>
|
||||
<div className="p-3">
|
||||
<div className="d-flex">
|
||||
<div>
|
||||
<div className={classNames('mr-2', styles.step)}>1</div>
|
||||
|
||||
<div className={classNames('pt-3 px-3', styles.instructionsContainer)}>
|
||||
<div className={classNames('border-bottom', styles.highlightStep)}>
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="mr-1">
|
||||
<div className={classNames('mr-2', styles.step)}>1</div>
|
||||
</div>
|
||||
<div>
|
||||
<Text className="mb-1" weight="bold">
|
||||
Install Cody
|
||||
</Text>
|
||||
<Text className="text-muted mb-0" size="small">
|
||||
Alternatively, you can reach this page by clicking{' '}
|
||||
<strong>View {'>'} Extensions</strong> and searching for{' '}
|
||||
<strong>Cody AI</strong>
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Text className="mb-1" weight="bold">
|
||||
Install Cody
|
||||
</Text>
|
||||
<Text className="text-muted mb-0" size="small">
|
||||
Alternatively, you can reach this page by clicking{' '}
|
||||
<strong>View {'>'} Extensions</strong> and searching for <strong>Cody AI</strong>
|
||||
</Text>
|
||||
<div className="d-flex flex-column justify-content-center align-items-center mt-4">
|
||||
<ButtonLink
|
||||
variant="primary"
|
||||
to="https://marketplace.visualstudio.com/items?itemName=sourcegraph.cody-ai"
|
||||
target="_blank"
|
||||
>
|
||||
Open Marketplace
|
||||
</ButtonLink>
|
||||
<img
|
||||
alt="VS Code Marketplace"
|
||||
className="mt-4"
|
||||
width="70%"
|
||||
src="https://storage.googleapis.com/sourcegraph-assets/VSCodeInstructions/__step1.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex flex-column justify-content-center align-items-center mt-4">
|
||||
<ButtonLink
|
||||
variant="primary"
|
||||
to="https://marketplace.visualstudio.com/items?itemName=sourcegraph.cody-ai"
|
||||
>
|
||||
Open Marketplace
|
||||
</ButtonLink>
|
||||
<img
|
||||
alt="VS Code Marketplace"
|
||||
className="mt-4"
|
||||
src="https://storage.googleapis.com/sourcegraph-assets/VSCodeInstructions/step1.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-3">
|
||||
<div className="d-flex">
|
||||
<div>
|
||||
<div className={classNames('mr-2', styles.step)}>2</div>
|
||||
</div>
|
||||
<div>
|
||||
<Text className="mb-1" weight="bold">
|
||||
Open Cody from the Sidebar on the Left
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex flex-column justify-content-center align-items-center mt-4">
|
||||
<img
|
||||
alt="VS Code Marketplace"
|
||||
className="mt-4"
|
||||
src="https://storage.googleapis.com/sourcegraph-assets/VSCodeInstructions/step2.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex p-3 border-bottom">
|
||||
<div>
|
||||
<div className={classNames('mr-2', styles.step)}>3</div>
|
||||
</div>
|
||||
<div className="mb-4 pb-4">
|
||||
<Text className="mb-1" weight="bold">
|
||||
Login
|
||||
</Text>
|
||||
<Text className="text-muted mb-0" size="small">
|
||||
Choose the same login method you used when you created your account
|
||||
</Text>
|
||||
<div className="mt-3 border-bottom">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="mr-1">
|
||||
<div className={classNames('mr-2', styles.step)}>2</div>
|
||||
</div>
|
||||
<div>
|
||||
<Text className="mb-1" weight="bold">
|
||||
Open Cody from the Sidebar on the Left
|
||||
</Text>
|
||||
<Text className="text-muted mb-0" size="small">
|
||||
Typically Cody will be the last item in the sidebar
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex flex-column justify-content-center align-items-center mt-4">
|
||||
<img
|
||||
alt="VS Code Marketplace"
|
||||
className="mt-2"
|
||||
width="70%"
|
||||
src="https://storage.googleapis.com/sourcegraph-assets/VSCodeInstructions/__step2.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 border-bottom">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="mr-1">
|
||||
<div className={classNames('mr-2', styles.step)}>3</div>
|
||||
</div>
|
||||
<div>
|
||||
<Text className="mb-1" weight="bold">
|
||||
Login
|
||||
</Text>
|
||||
<Text className="text-muted mb-0" size="small">
|
||||
Choose the same login method you used when you created your account
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex flex-column justify-content-center align-items-center mt-4">
|
||||
<img
|
||||
alt="VS Code Marketplace"
|
||||
className="mt-2"
|
||||
width="70%"
|
||||
src="https://storage.googleapis.com/sourcegraph-assets/VSCodeInstructions/__step3.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showStep === undefined ? (
|
||||
<div className="mt-3 d-flex justify-content-between">
|
||||
<Button variant="secondary" onClick={onBack} outline={true} size="sm">
|
||||
@ -106,42 +127,79 @@ export function VSCodeInstructions({
|
||||
{step === 1 && (
|
||||
<>
|
||||
<div className="mb-3 pb-3 border-bottom">
|
||||
<H2>Using Cody on VS Code</H2>
|
||||
<H2>Cody Features</H2>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
<div className="flex-1 p-3 border-right">
|
||||
<Text className="mb-1" weight="bold">
|
||||
<div className="flex-1 p-3 border-right d-flex flex-column justify-content-center align-items-center">
|
||||
<Text className="mb-1 w-100" weight="bold">
|
||||
Autocomplete
|
||||
</Text>
|
||||
<Text className="mb-0 text-muted" size="small">
|
||||
<Text className="mb-0 w-100 text-muted" size="small">
|
||||
Cody will autocomplete your code as you type
|
||||
</Text>
|
||||
<img
|
||||
alt="Cody Autocomplete"
|
||||
width="90%"
|
||||
className="mt-4"
|
||||
src="https://storage.googleapis.com/sourcegraph-assets/VSCodeInstructions/autoCompleteIllustration.svg"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 p-3">
|
||||
<Text className="mb-1" weight="bold">
|
||||
<div className="flex-1 p-3 d-flex flex-column justify-content-center align-items-center">
|
||||
<Text className="mb-1 w-100" weight="bold">
|
||||
Chat
|
||||
</Text>
|
||||
<Text className="mb-0 text-muted" size="small">
|
||||
<Text className="mb-0 text-muted w-100" size="small">
|
||||
Cody will autocomplete your code as you type
|
||||
</Text>
|
||||
<img
|
||||
alt="Cody Chat"
|
||||
width="80%"
|
||||
className="mt-4"
|
||||
src="https://storage.googleapis.com/sourcegraph-assets/VSCodeInstructions/chatIllustration.svg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex my-3 py-3 border-top border-bottom">
|
||||
<div className="flex-1 p-3 border-right">
|
||||
<Text className="mb-1" weight="bold">
|
||||
Settings
|
||||
<div className="flex-1 p-3 border-right d-flex flex-column justify-content-center align-items-center">
|
||||
<Text className="mb-1 w-100" weight="bold">
|
||||
Commands
|
||||
</Text>
|
||||
<Text className="mb-0 text-muted" size="small">
|
||||
<Text className="mb-0 text-muted w-100" size="small">
|
||||
Cody will autocomplete your code as you type
|
||||
</Text>
|
||||
<img
|
||||
alt="Cody Commands"
|
||||
width="80%"
|
||||
className="mt-4"
|
||||
src="https://storage.googleapis.com/sourcegraph-assets/VSCodeInstructions/commandsIllustration.svg"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 p-3">
|
||||
<Text className="mb-1" weight="bold">
|
||||
<div className="flex-1 p-3 d-flex flex-column justify-content-center align-items-center">
|
||||
<Text className="mb-1 w-100" weight="bold">
|
||||
Feedback
|
||||
</Text>
|
||||
<Text className="mb-0 text-muted" size="small">
|
||||
<Text className="mb-0 text-muted w-100" size="small">
|
||||
Cody will autocomplete your code as you type
|
||||
</Text>
|
||||
<Link to="https://discord.gg/rDPqBejz93" className="d-flex w-100 justify-content-center">
|
||||
<img
|
||||
alt="Discord Feedback"
|
||||
width="50%"
|
||||
className="mt-4"
|
||||
src="https://storage.googleapis.com/sourcegraph-assets/VSCodeInstructions/discordCTA.svg"
|
||||
/>
|
||||
</Link>
|
||||
<Link
|
||||
to="https://github.com/sourcegraph/cody/discussions/new?category=product-feedback"
|
||||
className="d-flex w-100 justify-content-center"
|
||||
>
|
||||
<img
|
||||
alt="GitHub Feedback"
|
||||
width="50%"
|
||||
className="mt-4"
|
||||
src="https://storage.googleapis.com/sourcegraph-assets/VSCodeInstructions/feedbackCTA.svg"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{showStep === undefined ? (
|
||||
|
||||
@ -31,6 +31,8 @@ export interface CodyConfigurationPageProps extends TelemetryProps {
|
||||
repo?: { id: string; name: string }
|
||||
}
|
||||
|
||||
/* eslint-disable @sourcegraph/sourcegraph/check-help-links */
|
||||
|
||||
export const CodyConfigurationPage: FC<CodyConfigurationPageProps> = ({
|
||||
authenticatedUser,
|
||||
queryPolicies = defaultQueryPolicies,
|
||||
|
||||
@ -46,6 +46,8 @@ const logEvent = (eventName: string, type?: string, source?: string): void =>
|
||||
|
||||
const logPageView = (pageTitle: string): void => eventLogger.logPageView(pageTitle)
|
||||
|
||||
/* eslint-disable @sourcegraph/sourcegraph/check-help-links */
|
||||
|
||||
export const GetCodyPage: React.FunctionComponent<GetCodyPageProps> = ({ authenticatedUser, context }) => {
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
|
||||
11
docsite_run.sh
Executable file
11
docsite_run.sh
Executable file
@ -0,0 +1,11 @@
|
||||
#!/bin/bash
|
||||
cd /private/var/tmp/_bazel_danielmarques/2babe0eb2a573a2918fc1ea403c04cde/execroot/__main__/bazel-out/darwin_arm64-fastbuild/bin/doc/serve.runfiles/__main__ && \
|
||||
exec env \
|
||||
-u JAVA_RUNFILES \
|
||||
-u RUNFILES_DIR \
|
||||
-u RUNFILES_MANIFEST_FILE \
|
||||
-u RUNFILES_MANIFEST_ONLY \
|
||||
-u TEST_SRCDIR \
|
||||
BUILD_WORKING_DIRECTORY=/Users/danielmarques/Documents/GitHub/sourcegraph \
|
||||
BUILD_WORKSPACE_DIRECTORY=/Users/danielmarques/Documents/GitHub/sourcegraph \
|
||||
/private/var/tmp/_bazel_danielmarques/2babe0eb2a573a2918fc1ea403c04cde/execroot/__main__/bazel-out/darwin_arm64-fastbuild/bin/doc/serve dev/tools/docsite "$@"
|
||||
Loading…
Reference in New Issue
Block a user