Skip to content

Commit b43c3a8

Browse files
jsladermanjsladerman
authored
deprecate cloud shell in onboarding (#1306)
1 parent 109639a commit b43c3a8

File tree

4 files changed

+137
-129
lines changed

4 files changed

+137
-129
lines changed

‎www/src/components/shell/onboarding/Onboarding.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ function OnboardingWithContext({ ...props }: OnboardingProps): ReactElement {
123123
const [path, setPath] = useState<OnboardingPath>(
124124
restoredContext?.path ?? OnboardingPath.None
125125
)
126+
// const [sections, setSections] = useState<Sections>(defaultSections())
126127
const [sections, setSections] = useState<Sections>(defaultSections())
127128
const [section, setSection] = useState<Section>(sections[SectionKey.WELCOME]!)
128129
const [workspace, setWorkspace] = useState<WorkspaceProps>(

‎www/src/components/shell/onboarding/OnboardingFlow.tsx‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,44 @@
1-
import { useQuery } from '@apollo/client'
1+
// import { useQuery } from '@apollo/client'
22
import { Flex } from 'honorable'
33
import { useMemo } from 'react'
4-
import { LoopingLogo } from '@pluralsh/design-system'
4+
// import { LoopingLogo } from '@pluralsh/design-system'
55

6-
import { AUTHENTICATION_URLS_QUERY } from '../queries'
7-
import { useDevTokenOutputSecretCode } from '../hooks/useDevToken'
6+
// import { AUTHENTICATION_URLS_QUERY } from '../queries'
7+
// import { useDevTokenOutputSecretCode } from '../hooks/useDevToken'
88

99
import OnboardingCard from './OnboardingCard'
10-
import CloudStep from './sections/cloud/CloudStep'
11-
import WorkspaceStep from './sections/workspace/WorkspaceStep'
12-
import { useSection, useToken } from './context/hooks'
10+
// import CloudStep from './sections/cloud/CloudStep'
11+
// import WorkspaceStep from './sections/workspace/WorkspaceStep'
12+
import { useSection } from './context/hooks'
1313
import CLIInstallationStep from './sections/cli/CLIInstallationStep'
1414
import CLICompletionStep from './sections/cli/CLICompletionStep'
1515
import { CreateCloudShellSectionState, SectionKey } from './context/types'
16-
import CreateShellStep from './sections/shell/CreateShellStep'
17-
import OverviewStep from './sections/overview/OverviewStep'
16+
// import CreateShellStep from './sections/shell/CreateShellStep'
17+
// import OverviewStep from './sections/overview/OverviewStep'
1818
import OnboardingTips from './OnboardingTips'
1919
import WelcomeStep from './sections/welcome/WelcomeStep'
2020

2121
function OnboardingFlow({ onNext, onBack }) {
22-
const token = useToken() || ''
2322
const { section } = useSection()
2423
const isCreating = useMemo(
2524
() => section.state === CreateCloudShellSectionState.Creating,
2625
[section]
2726
)
28-
const { data, loading } = useQuery(AUTHENTICATION_URLS_QUERY)
27+
// const { data, loading } = useQuery(AUTHENTICATION_URLS_QUERY)
2928

30-
useDevTokenOutputSecretCode(token)
29+
// const token = useToken() || ''
30+
// useDevTokenOutputSecretCode(token)
3131

32-
if (loading) {
33-
return (
34-
<Flex
35-
align="center"
36-
justify="center"
37-
>
38-
<LoopingLogo />
39-
</Flex>
40-
)
41-
}
32+
// if (loading) {
33+
// return (
34+
// <Flex
35+
// align="center"
36+
// justify="center"
37+
// >
38+
// <LoopingLogo />
39+
// </Flex>
40+
// )
41+
// }
4242

4343
return (
4444
<Flex
@@ -50,13 +50,13 @@ function OnboardingFlow({ onNext, onBack }) {
5050
mode={isCreating ? 'Compact' : 'Default'}
5151
>
5252
{section?.key === SectionKey.WELCOME && <WelcomeStep onNext={onNext} />}
53-
{section?.key === SectionKey.ONBOARDING_OVERVIEW && (
53+
{/* {section?.key === SectionKey.ONBOARDING_OVERVIEW && (
5454
<OverviewStep
5555
onBack={onBack}
5656
onNext={onNext}
5757
/>
58-
)}
59-
{section?.key === SectionKey.CONFIGURE_CLOUD && (
58+
)} */}
59+
{/* {section?.key === SectionKey.CONFIGURE_CLOUD && (
6060
<CloudStep
6161
data={data}
6262
onNext={onNext}
@@ -71,7 +71,7 @@ function OnboardingFlow({ onNext, onBack }) {
7171
)}
7272
{section?.key === SectionKey.CREATE_CLOUD_SHELL && (
7373
<CreateShellStep onBack={onBack} />
74-
)}
74+
)} */}
7575
{section?.key === SectionKey.INSTALL_CLI && (
7676
<CLIInstallationStep
7777
onNext={onNext}

‎www/src/components/shell/onboarding/context/hooks.ts‎

Lines changed: 108 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Dispatch, useCallback, useContext, useEffect, useMemo } from 'react'
22
import {
3-
AppsIcon,
3+
// AppsIcon,
44
ChecklistIcon,
5-
CloudIcon,
5+
// CloudIcon,
66
ListIcon,
77
TerminalIcon,
8-
WorkspaceIcon,
8+
// WorkspaceIcon,
99
} from '@pluralsh/design-system'
1010

1111
import {
@@ -25,62 +25,62 @@ import {
2525
WorkspaceProps,
2626
} from './types'
2727

28-
const defaultSections = (): Sections => {
29-
const sections: Sections = {
30-
[SectionKey.WELCOME]: {
31-
index: 0,
32-
key: SectionKey.WELCOME,
33-
title: 'Welcome to Plural!',
34-
IconComponent: AppsIcon,
35-
},
36-
[SectionKey.ONBOARDING_OVERVIEW]: {
37-
index: 1,
38-
key: SectionKey.ONBOARDING_OVERVIEW,
39-
title: 'Onboarding overview',
40-
IconComponent: ChecklistIcon,
41-
},
42-
[SectionKey.CONFIGURE_CLOUD]: {
43-
index: 2,
44-
key: SectionKey.CONFIGURE_CLOUD,
45-
title: 'Configure credentials',
46-
IconComponent: CloudIcon,
47-
},
48-
[SectionKey.CONFIGURE_WORKSPACE]: {
49-
index: 3,
50-
key: SectionKey.CONFIGURE_WORKSPACE,
51-
title: 'Configure workspace',
52-
IconComponent: WorkspaceIcon,
53-
},
54-
[SectionKey.CREATE_CLOUD_SHELL]: {
55-
index: 4,
56-
key: SectionKey.CREATE_CLOUD_SHELL,
57-
title: 'Create cloud shell',
58-
IconComponent: TerminalIcon,
59-
},
60-
}
61-
62-
// build sections flow
63-
sections[SectionKey.WELCOME]!.next = sections[SectionKey.ONBOARDING_OVERVIEW]
64-
65-
sections[SectionKey.ONBOARDING_OVERVIEW]!.next =
66-
sections[SectionKey.CONFIGURE_CLOUD]
67-
sections[SectionKey.ONBOARDING_OVERVIEW]!.prev = sections[SectionKey.WELCOME]
68-
69-
sections[SectionKey.CONFIGURE_CLOUD]!.prev =
70-
sections[SectionKey.ONBOARDING_OVERVIEW]
71-
sections[SectionKey.CONFIGURE_CLOUD]!.next =
72-
sections[SectionKey.CONFIGURE_WORKSPACE]
73-
74-
sections[SectionKey.CONFIGURE_WORKSPACE]!.prev =
75-
sections[SectionKey.CONFIGURE_CLOUD]
76-
sections[SectionKey.CONFIGURE_WORKSPACE]!.next =
77-
sections[SectionKey.CREATE_CLOUD_SHELL]
78-
79-
sections[SectionKey.CREATE_CLOUD_SHELL]!.prev =
80-
sections[SectionKey.CONFIGURE_WORKSPACE]
81-
82-
return sections
83-
}
28+
// const defaultSections = (): Sections => {
29+
// const sections: Sections = {
30+
// [SectionKey.WELCOME]: {
31+
// index: 0,
32+
// key: SectionKey.WELCOME,
33+
// title: 'Welcome to Plural!',
34+
// IconComponent: AppsIcon,
35+
// },
36+
// [SectionKey.ONBOARDING_OVERVIEW]: {
37+
// index: 1,
38+
// key: SectionKey.ONBOARDING_OVERVIEW,
39+
// title: 'Onboarding overview',
40+
// IconComponent: ChecklistIcon,
41+
// },
42+
// [SectionKey.CONFIGURE_CLOUD]: {
43+
// index: 2,
44+
// key: SectionKey.CONFIGURE_CLOUD,
45+
// title: 'Configure credentials',
46+
// IconComponent: CloudIcon,
47+
// },
48+
// [SectionKey.CONFIGURE_WORKSPACE]: {
49+
// index: 3,
50+
// key: SectionKey.CONFIGURE_WORKSPACE,
51+
// title: 'Configure workspace',
52+
// IconComponent: WorkspaceIcon,
53+
// },
54+
// [SectionKey.CREATE_CLOUD_SHELL]: {
55+
// index: 4,
56+
// key: SectionKey.CREATE_CLOUD_SHELL,
57+
// title: 'Create cloud shell',
58+
// IconComponent: TerminalIcon,
59+
// },
60+
// }
61+
62+
// // build sections flow
63+
// sections[SectionKey.WELCOME]!.next = sections[SectionKey.ONBOARDING_OVERVIEW]
64+
65+
// sections[SectionKey.ONBOARDING_OVERVIEW]!.next =
66+
// sections[SectionKey.CONFIGURE_CLOUD]
67+
// sections[SectionKey.ONBOARDING_OVERVIEW]!.prev = sections[SectionKey.WELCOME]
68+
69+
// sections[SectionKey.CONFIGURE_CLOUD]!.prev =
70+
// sections[SectionKey.ONBOARDING_OVERVIEW]
71+
// sections[SectionKey.CONFIGURE_CLOUD]!.next =
72+
// sections[SectionKey.CONFIGURE_WORKSPACE]
73+
74+
// sections[SectionKey.CONFIGURE_WORKSPACE]!.prev =
75+
// sections[SectionKey.CONFIGURE_CLOUD]
76+
// sections[SectionKey.CONFIGURE_WORKSPACE]!.next =
77+
// sections[SectionKey.CREATE_CLOUD_SHELL]
78+
79+
// sections[SectionKey.CREATE_CLOUD_SHELL]!.prev =
80+
// sections[SectionKey.CONFIGURE_WORKSPACE]
81+
82+
// return sections
83+
// }
8484

8585
const localCLISections = (): Sections => {
8686
const sections: Sections = {
@@ -90,44 +90,46 @@ const localCLISections = (): Sections => {
9090
title: 'Welcome to Plural!',
9191
IconComponent: ChecklistIcon,
9292
},
93-
[SectionKey.ONBOARDING_OVERVIEW]: {
94-
index: 1,
95-
key: SectionKey.ONBOARDING_OVERVIEW,
96-
title: 'Onboarding overview',
97-
IconComponent: ChecklistIcon,
98-
},
99-
[SectionKey.CONFIGURE_CLOUD]: {
100-
index: 2,
101-
key: SectionKey.CONFIGURE_CLOUD,
102-
title: 'Configure credentials',
103-
IconComponent: CloudIcon,
104-
},
93+
// [SectionKey.ONBOARDING_OVERVIEW]: {
94+
// index: 1,
95+
// key: SectionKey.ONBOARDING_OVERVIEW,
96+
// title: 'Onboarding overview',
97+
// IconComponent: ChecklistIcon,
98+
// },
99+
// [SectionKey.CONFIGURE_CLOUD]: {
100+
// index: 2,
101+
// key: SectionKey.CONFIGURE_CLOUD,
102+
// title: 'Configure credentials',
103+
// IconComponent: CloudIcon,
104+
// },
105105
[SectionKey.INSTALL_CLI]: {
106-
index: 3,
106+
index: 1,
107107
key: SectionKey.INSTALL_CLI,
108108
title: 'Install Plural CLI',
109109
IconComponent: TerminalIcon,
110110
},
111111
[SectionKey.COMPLETE_SETUP]: {
112-
index: 4,
112+
index: 2,
113113
key: SectionKey.COMPLETE_SETUP,
114114
title: 'Complete Setup',
115115
IconComponent: ListIcon,
116116
},
117117
}
118118

119119
// build sections flow
120-
sections[SectionKey.WELCOME]!.next = sections[SectionKey.ONBOARDING_OVERVIEW]
120+
// sections[SectionKey.WELCOME]!.next = sections[SectionKey.ONBOARDING_OVERVIEW]
121+
sections[SectionKey.WELCOME]!.next = sections[SectionKey.INSTALL_CLI]
121122

122-
sections[SectionKey.ONBOARDING_OVERVIEW]!.next =
123-
sections[SectionKey.CONFIGURE_CLOUD]
124-
sections[SectionKey.ONBOARDING_OVERVIEW]!.prev = sections[SectionKey.WELCOME]
123+
// sections[SectionKey.ONBOARDING_OVERVIEW]!.next =
124+
// sections[SectionKey.CONFIGURE_CLOUD]
125+
// sections[SectionKey.ONBOARDING_OVERVIEW]!.prev = sections[SectionKey.WELCOME]
125126

126-
sections[SectionKey.CONFIGURE_CLOUD]!.prev =
127-
sections[SectionKey.ONBOARDING_OVERVIEW]
128-
sections[SectionKey.CONFIGURE_CLOUD]!.next = sections[SectionKey.INSTALL_CLI]
127+
// sections[SectionKey.CONFIGURE_CLOUD]!.prev =
128+
// sections[SectionKey.ONBOARDING_OVERVIEW]
129+
// sections[SectionKey.CONFIGURE_CLOUD]!.next = sections[SectionKey.INSTALL_CLI]
129130

130-
sections[SectionKey.INSTALL_CLI]!.prev = sections[SectionKey.CONFIGURE_CLOUD]
131+
// sections[SectionKey.INSTALL_CLI]!.prev = sections[SectionKey.CONFIGURE_CLOUD]
132+
sections[SectionKey.INSTALL_CLI]!.prev = sections[SectionKey.WELCOME]
131133
sections[SectionKey.INSTALL_CLI]!.next = sections[SectionKey.COMPLETE_SETUP]
132134

133135
sections[SectionKey.COMPLETE_SETUP]!.prev = sections[SectionKey.INSTALL_CLI]
@@ -157,34 +159,37 @@ const useSection = (s?: Section) => {
157159
}
158160
}
159161

160-
const useCloudType = (): CloudType => {
161-
const {
162-
cloud: { type },
163-
} = useContext(OnboardingContext)
162+
const useCloudType = (): CloudType =>
163+
// const {
164+
// cloud: { type },
165+
// } = useContext(OnboardingContext)
164166

165-
return type || CloudType.Cloud
166-
}
167+
// return type || CloudType.Cloud
168+
CloudType.Local
167169

168-
const usePath = (path: CloudType): Dispatch<void> => {
170+
const usePath = (): Dispatch<void> => {
171+
// const usePath = (path: CloudType): Dispatch<void> => {
169172
const { setSections, setSection } = useContext(OnboardingContext)
170173

171174
return useCallback(() => {
172-
let sections: Sections
173-
174-
switch (path) {
175-
case CloudType.Cloud:
176-
sections = defaultSections()
177-
break
178-
case CloudType.Demo:
179-
sections = defaultSections()
180-
break
181-
case CloudType.Local:
182-
sections = localCLISections()
183-
}
175+
const sections = localCLISections()
176+
// let sections: Sections
177+
178+
// switch (path) {
179+
// case CloudType.Cloud:
180+
// sections = defaultSections()
181+
// break
182+
// case CloudType.Demo:
183+
// sections = defaultSections()
184+
// break
185+
// case CloudType.Local:
186+
// sections = localCLISections()
187+
// }
184188

185189
setSections(sections)
186190
setSection((section) => ({ ...section, ...sections[section.key] }))
187-
}, [path, setSection, setSections])
191+
// }, [path, setSection, setSections])
192+
}, [setSection, setSections])
188193
}
189194

190195
const useSectionState = () => {
@@ -263,7 +268,8 @@ const useContextStorage = () => {
263268
export {
264269
useToken,
265270
useCloudType,
266-
defaultSections,
271+
// defaultSections,
272+
localCLISections as defaultSections,
267273
useSection,
268274
usePath,
269275
useSetWorkspaceKeys,

‎www/src/components/shell/onboarding/sections/cloud/CloudStep.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ const reverseLookup = (
5454

5555
function CloudStep({ onBack, onNext, data }) {
5656
const cloudType = useCloudType()
57-
const setPath = usePath(cloudType)
57+
// const setPath = usePath(cloudType)
58+
const setPath = usePath()
5859
const navigate = useNavigate()
5960
const setSectionState = useSectionState()
6061
const { fresh: isOnboarding, mutation } = useOnboarded()

0 commit comments

Comments
 (0)