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

Jump to bottom

deprecate cloud shell in onboarding #1306

Merged
merged 1 commit into from
May 7, 2024
Merged

deprecate cloud shell in onboarding #1306

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions www/src/components/shell/onboarding/Onboarding.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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