From b43c3a8cebffb30f5837608b91f72fcca3350712 Mon Sep 17 00:00:00 2001 From: Jake Laderman Date: Tue, 7 May 2024 16:02:36 -0400 Subject: [PATCH] deprecate cloud shell in onboarding (#1306) --- .../shell/onboarding/Onboarding.tsx | 1 + .../shell/onboarding/OnboardingFlow.tsx | 52 ++--- .../shell/onboarding/context/hooks.ts | 210 +++++++++--------- .../onboarding/sections/cloud/CloudStep.tsx | 3 +- 4 files changed, 137 insertions(+), 129 deletions(-) diff --git a/www/src/components/shell/onboarding/Onboarding.tsx b/www/src/components/shell/onboarding/Onboarding.tsx index 810f243da..54769a56d 100644 --- a/www/src/components/shell/onboarding/Onboarding.tsx +++ b/www/src/components/shell/onboarding/Onboarding.tsx @@ -123,6 +123,7 @@ function OnboardingWithContext({ ...props }: OnboardingProps): ReactElement { const [path, setPath] = useState( restoredContext?.path ?? OnboardingPath.None ) + // const [sections, setSections] = useState(defaultSections()) const [sections, setSections] = useState(defaultSections()) const [section, setSection] = useState
(sections[SectionKey.WELCOME]!) const [workspace, setWorkspace] = useState( diff --git a/www/src/components/shell/onboarding/OnboardingFlow.tsx b/www/src/components/shell/onboarding/OnboardingFlow.tsx index 63937fc63..42493374b 100644 --- a/www/src/components/shell/onboarding/OnboardingFlow.tsx +++ b/www/src/components/shell/onboarding/OnboardingFlow.tsx @@ -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 ( - - - - ) - } + // if (loading) { + // return ( + // + // + // + // ) + // } return ( {section?.key === SectionKey.WELCOME && } - {section?.key === SectionKey.ONBOARDING_OVERVIEW && ( + {/* {section?.key === SectionKey.ONBOARDING_OVERVIEW && ( - )} - {section?.key === SectionKey.CONFIGURE_CLOUD && ( + )} */} + {/* {section?.key === SectionKey.CONFIGURE_CLOUD && ( - )} + )} */} {section?.key === SectionKey.INSTALL_CLI && ( { - 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 = { @@ -90,26 +90,26 @@ 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, @@ -117,17 +117,19 @@ const localCLISections = (): Sections => { } // 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] @@ -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 => { +const usePath = (): Dispatch => { + // const usePath = (path: CloudType): Dispatch => { 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 = () => { @@ -263,7 +268,8 @@ const useContextStorage = () => { export { useToken, useCloudType, - defaultSections, + // defaultSections, + localCLISections as defaultSections, useSection, usePath, useSetWorkspaceKeys, diff --git a/www/src/components/shell/onboarding/sections/cloud/CloudStep.tsx b/www/src/components/shell/onboarding/sections/cloud/CloudStep.tsx index 3b4057745..4227f13e9 100644 --- a/www/src/components/shell/onboarding/sections/cloud/CloudStep.tsx +++ b/www/src/components/shell/onboarding/sections/cloud/CloudStep.tsx @@ -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()