Skip to content

Commit

Permalink
deprecate cloud shell in onboarding (#1306)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsladerman
jsladerman authored May 7, 2024
1 parent 109639a commit b43c3a8
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 129 deletions.
1 change: 1 addition & 0 deletions www/src/components/shell/onboarding/Onboarding.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ function OnboardingWithContext({ ...props }: OnboardingProps): ReactElement {
const [path, setPath] = useState<OnboardingPath>(
restoredContext?.path ?? OnboardingPath.None
)
// const [sections, setSections] = useState<Sections>(defaultSections())
const [sections, setSections] = useState<Sections>(defaultSections())
const [section, setSection] = useState<Section>(sections[SectionKey.WELCOME]!)
const [workspace, setWorkspace] = useState<WorkspaceProps>(
Expand Down
52 changes: 26 additions & 26 deletions www/src/components/shell/onboarding/OnboardingFlow.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
import { useQuery } from '@apollo/client'
// import { useQuery } from '@apollo/client'
import { Flex } from 'honorable'
import { useMemo } from 'react'
import { LoopingLogo } from '@pluralsh/design-system'
// import { LoopingLogo } from '@pluralsh/design-system'

import { AUTHENTICATION_URLS_QUERY } from '../queries'
import { useDevTokenOutputSecretCode } from '../hooks/useDevToken'
// import { AUTHENTICATION_URLS_QUERY } from '../queries'
// import { useDevTokenOutputSecretCode } from '../hooks/useDevToken'

import OnboardingCard from './OnboardingCard'
import CloudStep from './sections/cloud/CloudStep'
import WorkspaceStep from './sections/workspace/WorkspaceStep'
import { useSection, useToken } from './context/hooks'
// import CloudStep from './sections/cloud/CloudStep'
// import WorkspaceStep from './sections/workspace/WorkspaceStep'
import { useSection } from './context/hooks'
import CLIInstallationStep from './sections/cli/CLIInstallationStep'
import CLICompletionStep from './sections/cli/CLICompletionStep'
import { CreateCloudShellSectionState, SectionKey } from './context/types'
import CreateShellStep from './sections/shell/CreateShellStep'
import OverviewStep from './sections/overview/OverviewStep'
// import CreateShellStep from './sections/shell/CreateShellStep'
// import OverviewStep from './sections/overview/OverviewStep'
import OnboardingTips from './OnboardingTips'
import WelcomeStep from './sections/welcome/WelcomeStep'

function OnboardingFlow({ onNext, onBack }) {
const token = useToken() || ''
const { section } = useSection()
const isCreating = useMemo(
() => section.state === CreateCloudShellSectionState.Creating,
[section]
)
const { data, loading } = useQuery(AUTHENTICATION_URLS_QUERY)
// const { data, loading } = useQuery(AUTHENTICATION_URLS_QUERY)

useDevTokenOutputSecretCode(token)
// const token = useToken() || ''
// useDevTokenOutputSecretCode(token)

if (loading) {
return (
<Flex
align="center"
justify="center"
>
<LoopingLogo />
</Flex>
)
}
// if (loading) {
// return (
// <Flex
// align="center"
// justify="center"
// >
// <LoopingLogo />
// </Flex>
// )
// }

return (
<Flex
Expand All @@ -50,13 +50,13 @@ function OnboardingFlow({ onNext, onBack }) {
mode={isCreating ? 'Compact' : 'Default'}
>
{section?.key === SectionKey.WELCOME && <WelcomeStep onNext={onNext} />}
{section?.key === SectionKey.ONBOARDING_OVERVIEW && (
{/* {section?.key === SectionKey.ONBOARDING_OVERVIEW && (
<OverviewStep
onBack={onBack}
onNext={onNext}
/>
)}
{section?.key === SectionKey.CONFIGURE_CLOUD && (
)} */}
{/* {section?.key === SectionKey.CONFIGURE_CLOUD && (
<CloudStep
data={data}
onNext={onNext}
Expand All @@ -71,7 +71,7 @@ function OnboardingFlow({ onNext, onBack }) {
)}
{section?.key === SectionKey.CREATE_CLOUD_SHELL && (
<CreateShellStep onBack={onBack} />
)}
)} */}
{section?.key === SectionKey.INSTALL_CLI && (
<CLIInstallationStep
onNext={onNext}
Expand Down
210 changes: 108 additions & 102 deletions www/src/components/shell/onboarding/context/hooks.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Dispatch, useCallback, useContext, useEffect, useMemo } from 'react'
import {
AppsIcon,
// AppsIcon,
ChecklistIcon,
CloudIcon,
// CloudIcon,
ListIcon,
TerminalIcon,
WorkspaceIcon,
// WorkspaceIcon,
} from '@pluralsh/design-system'

import {
Expand All @@ -25,62 +25,62 @@ import {
WorkspaceProps,
} from './types'

const defaultSections = (): Sections => {
const sections: Sections = {
[SectionKey.WELCOME]: {
index: 0,
key: SectionKey.WELCOME,
title: 'Welcome to Plural!',
IconComponent: AppsIcon,
},
[SectionKey.ONBOARDING_OVERVIEW]: {
index: 1,
key: SectionKey.ONBOARDING_OVERVIEW,
title: 'Onboarding overview',
IconComponent: ChecklistIcon,
},
[SectionKey.CONFIGURE_CLOUD]: {
index: 2,
key: SectionKey.CONFIGURE_CLOUD,
title: 'Configure credentials',
IconComponent: CloudIcon,
},
[SectionKey.CONFIGURE_WORKSPACE]: {
index: 3,
key: SectionKey.CONFIGURE_WORKSPACE,
title: 'Configure workspace',
IconComponent: WorkspaceIcon,
},
[SectionKey.CREATE_CLOUD_SHELL]: {
index: 4,
key: SectionKey.CREATE_CLOUD_SHELL,
title: 'Create cloud shell',
IconComponent: TerminalIcon,
},
}

// build sections flow
sections[SectionKey.WELCOME]!.next = sections[SectionKey.ONBOARDING_OVERVIEW]

sections[SectionKey.ONBOARDING_OVERVIEW]!.next =
sections[SectionKey.CONFIGURE_CLOUD]
sections[SectionKey.ONBOARDING_OVERVIEW]!.prev = sections[SectionKey.WELCOME]

sections[SectionKey.CONFIGURE_CLOUD]!.prev =
sections[SectionKey.ONBOARDING_OVERVIEW]
sections[SectionKey.CONFIGURE_CLOUD]!.next =
sections[SectionKey.CONFIGURE_WORKSPACE]

sections[SectionKey.CONFIGURE_WORKSPACE]!.prev =
sections[SectionKey.CONFIGURE_CLOUD]
sections[SectionKey.CONFIGURE_WORKSPACE]!.next =
sections[SectionKey.CREATE_CLOUD_SHELL]

sections[SectionKey.CREATE_CLOUD_SHELL]!.prev =
sections[SectionKey.CONFIGURE_WORKSPACE]

return sections
}
// const defaultSections = (): Sections => {
// const sections: Sections = {
// [SectionKey.WELCOME]: {
// index: 0,
// key: SectionKey.WELCOME,
// title: 'Welcome to Plural!',
// IconComponent: AppsIcon,
// },
// [SectionKey.ONBOARDING_OVERVIEW]: {
// index: 1,
// key: SectionKey.ONBOARDING_OVERVIEW,
// title: 'Onboarding overview',
// IconComponent: ChecklistIcon,
// },
// [SectionKey.CONFIGURE_CLOUD]: {
// index: 2,
// key: SectionKey.CONFIGURE_CLOUD,
// title: 'Configure credentials',
// IconComponent: CloudIcon,
// },
// [SectionKey.CONFIGURE_WORKSPACE]: {
// index: 3,
// key: SectionKey.CONFIGURE_WORKSPACE,
// title: 'Configure workspace',
// IconComponent: WorkspaceIcon,
// },
// [SectionKey.CREATE_CLOUD_SHELL]: {
// index: 4,
// key: SectionKey.CREATE_CLOUD_SHELL,
// title: 'Create cloud shell',
// IconComponent: TerminalIcon,
// },
// }

// // build sections flow
// sections[SectionKey.WELCOME]!.next = sections[SectionKey.ONBOARDING_OVERVIEW]

// sections[SectionKey.ONBOARDING_OVERVIEW]!.next =
// sections[SectionKey.CONFIGURE_CLOUD]
// sections[SectionKey.ONBOARDING_OVERVIEW]!.prev = sections[SectionKey.WELCOME]

// sections[SectionKey.CONFIGURE_CLOUD]!.prev =
// sections[SectionKey.ONBOARDING_OVERVIEW]
// sections[SectionKey.CONFIGURE_CLOUD]!.next =
// sections[SectionKey.CONFIGURE_WORKSPACE]

// sections[SectionKey.CONFIGURE_WORKSPACE]!.prev =
// sections[SectionKey.CONFIGURE_CLOUD]
// sections[SectionKey.CONFIGURE_WORKSPACE]!.next =
// sections[SectionKey.CREATE_CLOUD_SHELL]

// sections[SectionKey.CREATE_CLOUD_SHELL]!.prev =
// sections[SectionKey.CONFIGURE_WORKSPACE]

// return sections
// }

const localCLISections = (): Sections => {
const sections: Sections = {
Expand All @@ -90,44 +90,46 @@ const localCLISections = (): Sections => {
title: 'Welcome to Plural!',
IconComponent: ChecklistIcon,
},
[SectionKey.ONBOARDING_OVERVIEW]: {
index: 1,
key: SectionKey.ONBOARDING_OVERVIEW,
title: 'Onboarding overview',
IconComponent: ChecklistIcon,
},
[SectionKey.CONFIGURE_CLOUD]: {
index: 2,
key: SectionKey.CONFIGURE_CLOUD,
title: 'Configure credentials',
IconComponent: CloudIcon,
},
// [SectionKey.ONBOARDING_OVERVIEW]: {
// index: 1,
// key: SectionKey.ONBOARDING_OVERVIEW,
// title: 'Onboarding overview',
// IconComponent: ChecklistIcon,
// },
// [SectionKey.CONFIGURE_CLOUD]: {
// index: 2,
// key: SectionKey.CONFIGURE_CLOUD,
// title: 'Configure credentials',
// IconComponent: CloudIcon,
// },
[SectionKey.INSTALL_CLI]: {
index: 3,
index: 1,
key: SectionKey.INSTALL_CLI,
title: 'Install Plural CLI',
IconComponent: TerminalIcon,
},
[SectionKey.COMPLETE_SETUP]: {
index: 4,
index: 2,
key: SectionKey.COMPLETE_SETUP,
title: 'Complete Setup',
IconComponent: ListIcon,
},
}

// build sections flow
sections[SectionKey.WELCOME]!.next = sections[SectionKey.ONBOARDING_OVERVIEW]
// sections[SectionKey.WELCOME]!.next = sections[SectionKey.ONBOARDING_OVERVIEW]
sections[SectionKey.WELCOME]!.next = sections[SectionKey.INSTALL_CLI]

sections[SectionKey.ONBOARDING_OVERVIEW]!.next =
sections[SectionKey.CONFIGURE_CLOUD]
sections[SectionKey.ONBOARDING_OVERVIEW]!.prev = sections[SectionKey.WELCOME]
// sections[SectionKey.ONBOARDING_OVERVIEW]!.next =
// sections[SectionKey.CONFIGURE_CLOUD]
// sections[SectionKey.ONBOARDING_OVERVIEW]!.prev = sections[SectionKey.WELCOME]

sections[SectionKey.CONFIGURE_CLOUD]!.prev =
sections[SectionKey.ONBOARDING_OVERVIEW]
sections[SectionKey.CONFIGURE_CLOUD]!.next = sections[SectionKey.INSTALL_CLI]
// sections[SectionKey.CONFIGURE_CLOUD]!.prev =
// sections[SectionKey.ONBOARDING_OVERVIEW]
// sections[SectionKey.CONFIGURE_CLOUD]!.next = sections[SectionKey.INSTALL_CLI]

sections[SectionKey.INSTALL_CLI]!.prev = sections[SectionKey.CONFIGURE_CLOUD]
// sections[SectionKey.INSTALL_CLI]!.prev = sections[SectionKey.CONFIGURE_CLOUD]
sections[SectionKey.INSTALL_CLI]!.prev = sections[SectionKey.WELCOME]
sections[SectionKey.INSTALL_CLI]!.next = sections[SectionKey.COMPLETE_SETUP]

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

const useCloudType = (): CloudType => {
const {
cloud: { type },
} = useContext(OnboardingContext)
const useCloudType = (): CloudType =>
// const {
// cloud: { type },
// } = useContext(OnboardingContext)

return type || CloudType.Cloud
}
// return type || CloudType.Cloud
CloudType.Local

const usePath = (path: CloudType): Dispatch<void> => {
const usePath = (): Dispatch<void> => {
// const usePath = (path: CloudType): Dispatch<void> => {
const { setSections, setSection } = useContext(OnboardingContext)

return useCallback(() => {
let sections: Sections

switch (path) {
case CloudType.Cloud:
sections = defaultSections()
break
case CloudType.Demo:
sections = defaultSections()
break
case CloudType.Local:
sections = localCLISections()
}
const sections = localCLISections()
// let sections: Sections

// switch (path) {
// case CloudType.Cloud:
// sections = defaultSections()
// break
// case CloudType.Demo:
// sections = defaultSections()
// break
// case CloudType.Local:
// sections = localCLISections()
// }

setSections(sections)
setSection((section) => ({ ...section, ...sections[section.key] }))
}, [path, setSection, setSections])
// }, [path, setSection, setSections])
}, [setSection, setSections])
}

const useSectionState = () => {
Expand Down Expand Up @@ -263,7 +268,8 @@ const useContextStorage = () => {
export {
useToken,
useCloudType,
defaultSections,
// defaultSections,
localCLISections as defaultSections,
useSection,
usePath,
useSetWorkspaceKeys,
Expand Down
3 changes: 2 additions & 1 deletion www/src/components/shell/onboarding/sections/cloud/CloudStep.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,8 @@ const reverseLookup = (

function CloudStep({ onBack, onNext, data }) {
const cloudType = useCloudType()
const setPath = usePath(cloudType)
// const setPath = usePath(cloudType)
const setPath = usePath()
const navigate = useNavigate()
const setSectionState = useSectionState()
const { fresh: isOnboarding, mutation } = useOnboarded()
Expand Down

0 comments on commit b43c3a8

Please sign in to comment.