Skip to content

Commit

Permalink
Add feedback to onboarding completion (#621)
Browse files Browse the repository at this point in the history 
* Bump ds version

* Update deps

* Create OnboardingCompletionModal
  • Loading branch information
@dherault
dherault authored Oct 19, 2022
1 parent 5bdaaaf commit cad1f71
Show file tree
Hide file tree
Showing 4 changed files with 913 additions and 342 deletions.
40 changes: 20 additions & 20 deletions www/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@
"packageManager": "[email protected]",
"dependencies": {
"@absinthe/socket": "0.2.1",
"@apollo/client": "3.6.9",
"@apollo/client": "3.7.0",
"@emotion/react": "11.10.4",
"@emotion/styled": "11.10.4",
"@gitbeaker/browser": "35.7.0",
"@growthbook/growthbook": "0.18.1",
"@jest/types": "29.0.3",
"@jest/types": "29.2.0",
"@nivo/core": "0.80.0",
"@nivo/geo": "0.80.0",
"@nivo/line": "0.80.0",
Expand All @@ -48,7 +48,7 @@
"fireworks-js": "1.4.1",
"forge-core": "1.4.6",
"fuse.js": "6.6.2",
"grommet": "2.26.0",
"grommet": "2.27.0",
"history": "5.3.0",
"honorable": "0.140.0",
"honorable-recipe-mp": "0.3.0",
Expand All @@ -59,7 +59,7 @@
"moment": "2.29.4",
"phoenix": "1.6.12",
"pluralsh-absinthe-socket-apollo-link": "0.2.0",
"pluralsh-design-system": "1.224.0",
"pluralsh-design-system": "1.233.0",
"prop-types": "15.8.1",
"query-string": "7.1.1",
"randomcolor": "0.6.2",
Expand All @@ -75,16 +75,16 @@
"react-dom": "18.2.0",
"react-file-icon": "1.2.0",
"react-file-picker": "0.0.6",
"react-icons": "4.4.0",
"react-icons": "4.6.0",
"react-json-view": "1.21.3",
"react-multiline-clamp": "2.0.0",
"react-portal": "4.2.2",
"react-resize-detector": "7.1.2",
"react-router-dom": "6.4.1",
"react-router-dom": "6.4.2",
"react-sage": "0.3.16",
"react-script-hook": "1.7.2",
"react-scripts": "5.0.1",
"react-spinners": "0.13.4",
"react-spinners": "0.13.6",
"react-stripe-elements": "6.1.2",
"react-sweet-progress": "1.1.2",
"react-toggle": "4.1.3",
Expand All @@ -96,43 +96,43 @@
"rehype-raw": "6.1.1",
"slate": "0.82.1",
"slate-history": "0.81.3",
"slate-react": "0.83.0",
"slate-react": "0.83.2",
"styled-components": "5.3.6",
"uuid": "9.0.0",
"workbox-core": "6.5.4",
"workbox-expiration": "6.5.4",
"workbox-precaching": "6.5.4",
"workbox-routing": "6.5.4",
"workbox-strategies": "6.5.4",
"xterm-addon-fit": "0.5.0",
"xterm-addon-fit": "0.6.0",
"xterm-for-react": "1.0.4",
"xterm-theme": "1.1.0"
},
"devDependencies": {
"@babel/core": "7.19.1",
"@babel/core": "7.19.3",
"@babel/eslint-parser": "7.19.1",
"@babel/preset-env": "7.19.1",
"@babel/preset-env": "7.19.4",
"@babel/preset-react": "7.18.6",
"@graphql-codegen/add": "3.2.1",
"@graphql-codegen/cli": "2.13.0",
"@graphql-codegen/cli": "2.13.7",
"@graphql-codegen/introspection": "2.2.1",
"@graphql-codegen/typescript": "2.7.3",
"@graphql-codegen/typescript-operations": "2.5.3",
"@graphql-codegen/typescript-react-apollo": "3.3.3",
"@graphql-codegen/typescript": "2.7.4",
"@graphql-codegen/typescript-operations": "2.5.4",
"@graphql-codegen/typescript-react-apollo": "3.3.4",
"@pluralsh/eslint-config-typescript": "2.3.0",
"@pluralsh/stylelint-config": "1.0.0",
"@types/randomcolor": "0.5.6",
"@typescript-eslint/eslint-plugin": "5.38.1",
"@typescript-eslint/parser": "5.38.1",
"@typescript-eslint/eslint-plugin": "5.40.1",
"@typescript-eslint/parser": "5.40.1",
"concurrently": "7.4.0",
"eslint": "8.24.0",
"eslint": "8.25.0",
"eslint-config-pluralsh": "3.1.0",
"eslint-plugin-import": "2.26.0",
"postcss-import": "8.2.0",
"serve": "14.0.1",
"source-map-explorer": "2.5.3",
"stylelint": "14.12.1",
"typescript": "4.8.3",
"stylelint": "14.14.0",
"typescript": "4.8.4",
"wait-on": "6.0.1"
},
"jest": {
Expand Down
192 changes: 192 additions & 0 deletions www/src/components/shell/OnboardingCompletionModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
import { cloneElement, useState } from 'react'
import { Link } from 'react-router-dom'
import { Button, Flex, P } from 'honorable'
import { Fireworks } from 'fireworks-js/dist/react'
import {
ArrowTopRightIcon,
DiscordIcon,
IconFrame,
Modal,
StarIcon,
ThumbsUpFilledIcon,
ThumbsUpIcon,
} from 'pluralsh-design-system'

type OnboardingCompletionModalProps = {
open: boolean
onClose: () => void
skipConsoleInstall: boolean
shell: any
}

function OnboardingCompletionModal({
open,
onClose,
skipConsoleInstall,
shell,
}: OnboardingCompletionModalProps) {
const [feedback, setFeedback] = useState<null | 'good' | 'bad'>(null)

return (
<>
{open && (
<Fireworks
options={{}}
style={{
top: 0,
left: 0,
width: '100vw',
height: '100vh',
position: 'fixed',
background: 'transparent',
zIndex: 999,
}}
/>
)}
<Modal
header="Next steps"
width={512}
maxWidth={512}
open={open}
onClose={onClose}
borderTop="4px solid border-success"
>
<P marginBottom="large">
Congratulations, you've installed your first apps!
</P>
{skipConsoleInstall && (
<Button
primary
width="100%"
as={Link}
to="/installed"
>
View my apps
</Button>
)}
{!skipConsoleInstall && (
<Flex align="center">
<Button
primary
as="a"
href={`https://console.${shell.subdomain}`}
target="_blank"
rel="noopener noreferrer"
endIcon={<ArrowTopRightIcon />}
flexGrow={1}
marginRight="medium"
>
Go to Plural Console
</Button>
<Button
secondary
as={Link}
to="/install"
flexGrow={1}
>
View my apps
</Button>
</Flex>
)}
<Flex
align="center"
justify="space-between"
marginTop="large"
>
<P>
How was your experience?
</P>
<Flex align="center">
<HoveredIcon
icon={feedback === 'good' ? <ThumbsUpFilledIcon /> : <ThumbsUpIcon />}
color={feedback === 'good' ? 'icon-success' : 'text-light'}
hoveredColor="icon-success"
textValue="Good"
onClick={() => setFeedback('good')}
/>
<HoveredIcon
icon={feedback === 'bad' ? <ThumbsUpFilledIcon transform="scale(1, -1)" /> : <ThumbsUpIcon transform="scale(1, -1)" />}
color={feedback === 'bad' ? 'icon-error' : 'text-light'}
hoveredColor="icon-error"
textValue="Bad"
onClick={() => setFeedback('bad')}
/>
</Flex>
</Flex>
{feedback === 'good' && (
<Flex
align="center"
justify="space-between"
marginTop="medium"
>
<P
body2
color="text-light"
>
Great! Support our project with a star.
</P>
<Button
secondary
startIcon={<StarIcon />}
as="a"
href="https://github.com/pluralsh/plural"
target="_blank"
rel="noopener noreferrer"
>
GitHub
</Button>
</Flex>
)}
{feedback === 'bad' && (
<Flex
align="center"
justify="space-between"
marginTop="medium"
>
<P
body2
color="text-light"
>
We're here to help. Ping us on Discord.
</P>
<Button
secondary
startIcon={<DiscordIcon />}
as="a"
href="https://discord.gg/pluralsh"
target="_blank"
rel="noopener noreferrer"
>
Discord
</Button>
</Flex>
)}
</Modal>
</>
)
}

function HoveredIcon({
icon,
color,
hoveredColor,
textValue,
...props
}: any) {
const [isHovered, setIsHovered] = useState(false)

return (
<IconFrame
cursor="pointer"
padding="xsmall"
textValue={textValue}
icon={cloneElement(icon, {
color: isHovered ? hoveredColor : color,
})}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
{...props}
/>
)
}
export default OnboardingCompletionModal
Loading

0 comments on commit cad1f71

Please sign in to comment.