diff --git a/www/src/components/shell/Shell.tsx b/www/src/components/shell/Shell.tsx index 40b5852028..583e6af458 100644 --- a/www/src/components/shell/Shell.tsx +++ b/www/src/components/shell/Shell.tsx @@ -4,7 +4,11 @@ import { Flex } from 'honorable' import { useCallback, useEffect, useMemo } from 'react' import { useSearchParams } from 'react-router-dom' -import { CloudShell, RootQueryType } from '../../generated/graphql' +import { + CloudShell, + RootQueryType, + useSetupShellMutation, +} from '../../generated/graphql' import ImpersonateServiceAccount from '../utils/ImpersonateServiceAccount' import { ResponsiveLayoutContentContainer } from '../utils/layout/ResponsiveLayoutContentContainer' import { ResponsiveLayoutSpacer } from '../utils/layout/ResponsiveLayoutSpacer' @@ -18,7 +22,6 @@ import { CLOUD_SHELL_QUERY, DELETE_SHELL_MUTATION, REBOOT_SHELL_MUTATION, - SETUP_SHELL_MUTATION, } from './queries' import Content from './terminal/Content' @@ -33,8 +36,7 @@ function TerminalBootStatus() { nextFetchPolicy: 'network-only', initialFetchPolicy: 'network-only', }) - const [setupShell, { error, data: bootResult }] = - useMutation(SETUP_SHELL_MUTATION) + const [setupShell, { error, data: bootResult }] = useSetupShellMutation() const [deleteShell] = useMutation(DELETE_SHELL_MUTATION) const loading = useMemo(() => !shell, [shell]) const isReady = useMemo( diff --git a/www/src/components/shell/onboarding/sections/shell/CreateShell.tsx b/www/src/components/shell/onboarding/sections/shell/CreateShell.tsx index 8dab0fb9e6..376834448d 100644 --- a/www/src/components/shell/onboarding/sections/shell/CreateShell.tsx +++ b/www/src/components/shell/onboarding/sections/shell/CreateShell.tsx @@ -18,12 +18,9 @@ import { RootMutationTypeCreateShellArgs, RootQueryType, ShellCredentialsAttributes, + useSetupShellMutation, } from '../../../../../generated/graphql' -import { - CLOUD_SHELL_QUERY, - CREATE_SHELL_MUTATION, - SETUP_SHELL_MUTATION, -} from '../../../queries' +import { CLOUD_SHELL_QUERY, CREATE_SHELL_MUTATION } from '../../../queries' import { CloudProps, CloudProviderToProvider, @@ -143,7 +140,7 @@ function CreateShell() { }) const [deleteShell] = useMutation(DeleteShellDocument) - const [setupShell] = useMutation(SETUP_SHELL_MUTATION, { + const [setupShell] = useSetupShellMutation({ onError: (error) => { setError(error) deleteShell() diff --git a/www/src/components/shell/queries.ts b/www/src/components/shell/queries.ts index 552ed435b0..e3c8003c3a 100644 --- a/www/src/components/shell/queries.ts +++ b/www/src/components/shell/queries.ts @@ -26,15 +26,6 @@ export const CLOUD_SHELL_QUERY = gql` ${CloudShellFragment} ` -export const SETUP_SHELL_MUTATION = gql` - mutation { - setupShell { - id - missing - } - } -` - export const CREATE_SHELL_MUTATION = gql` mutation Create($attributes: CloudShellAttributes!) { createShell(attributes: $attributes) { diff --git a/www/src/components/shell/terminal/Content.tsx b/www/src/components/shell/terminal/Content.tsx index 403104fbcf..4c99b6712f 100644 --- a/www/src/components/shell/terminal/Content.tsx +++ b/www/src/components/shell/terminal/Content.tsx @@ -1,4 +1,4 @@ -import { useMutation, useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client' import { A, Div, Flex, Span } from 'honorable' import { Dispatch, useCallback, useEffect, useMemo, useState } from 'react' import { Button, ErrorIcon, Modal } from '@pluralsh/design-system' @@ -6,8 +6,12 @@ import IsEmpty from 'lodash/isEmpty' import { useTheme } from 'styled-components' -import { CLOUD_SHELL_QUERY, SETUP_SHELL_MUTATION } from '../queries' -import { RootMutationType } from '../../../generated/graphql' +import { CLOUD_SHELL_QUERY } from '../queries' +import { + RootMutationType, + useSetupShellMutation, + useShellConfigurationQuery, +} from '../../../generated/graphql' import LoadingIndicator from '../../utils/LoadingIndicator' @@ -15,7 +19,6 @@ import TerminalThemeProvider from './actionbar/theme/Provider' import Terminal from './Terminal' import ContentCard from './ContentCard' import { ContextProps, State, TerminalContext } from './context/terminal' -import { SHELL_CONFIGURATION_QUERY } from './queries' import { Sidebar } from './sidebar/Sidebar' // function WelcomeModal() { @@ -120,11 +123,9 @@ function Content() { data: { shellConfiguration } = { shellConfiguration: undefined }, stopPolling, refetch, - } = useQuery(SHELL_CONFIGURATION_QUERY, { skip: !shell, pollInterval: 5000 }) - const [ - setupShell, - { data: { setupShell: setupShellData } = {} as RootMutationType }, - ] = useMutation(SETUP_SHELL_MUTATION, { fetchPolicy: 'no-cache' }) + } = useShellConfigurationQuery({ skip: !shell, pollInterval: 5000 }) + const [setupShell, { data: setupData = {} as RootMutationType }] = + useSetupShellMutation({ fetchPolicy: 'no-cache' }) const context: ContextProps = useMemo( () => ({ @@ -150,10 +151,10 @@ function Content() { return (
- {!IsEmpty(setupShellData?.missing) && ( + {!IsEmpty(setupData?.setupShell?.missing) && ( )} diff --git a/www/src/components/shell/terminal/actionbar/options/CloudInfoModal.tsx b/www/src/components/shell/terminal/actionbar/options/CloudInfoModal.tsx index 5e27d98a99..95a7499fc0 100644 --- a/www/src/components/shell/terminal/actionbar/options/CloudInfoModal.tsx +++ b/www/src/components/shell/terminal/actionbar/options/CloudInfoModal.tsx @@ -1,16 +1,13 @@ import { useCallback, useEffect, useState } from 'react' -import { useQuery } from '@apollo/client' import { FormField, Input, Modal } from '@pluralsh/design-system' import { A, Button, Flex, Span } from 'honorable' import GitUrlParse from 'git-url-parse' -import { SHELL_CONFIGURATION_QUERY } from '../../queries' +import { useShellConfigurationQuery } from '../../../../../generated/graphql' function CloudInfoModal({ onClose }) { const [open, setOpen] = useState(true) - const { - data: { shellConfiguration }, - } = useQuery(SHELL_CONFIGURATION_QUERY) + const { data } = useShellConfigurationQuery() const [gitUrl, setGitUrl] = useState<{ name: string; organization: string }>() const close = useCallback(() => { @@ -19,10 +16,10 @@ function CloudInfoModal({ onClose }) { }, [onClose]) useEffect(() => { - if (!shellConfiguration) return + if (!data?.shellConfiguration) return - setGitUrl(GitUrlParse(shellConfiguration.git.url)) - }, [shellConfiguration]) + setGitUrl(GitUrlParse(data?.shellConfiguration?.git?.url)) + }, [data?.shellConfiguration]) return ( state: State setState: Dispatch> onAction?: Dispatch diff --git a/www/src/generated/graphql.ts b/www/src/generated/graphql.ts index 5f3d75836c..428c38827f 100644 --- a/www/src/generated/graphql.ts +++ b/www/src/generated/graphql.ts @@ -5990,13 +5990,25 @@ export type GetTfProviderScaffoldQuery = { __typename?: 'RootQueryType', terrafo export type CloudShellFragment = { __typename?: 'CloudShell', id: string, aesKey: string, gitUrl: string, alive: boolean, provider: Provider, subdomain: string, cluster: string, status?: { __typename?: 'ShellStatus', ready?: boolean | null, initialized?: boolean | null, containersReady?: boolean | null, podScheduled?: boolean | null } | null }; +export type ShellConfigurationFragment = { __typename?: 'ShellConfiguration', contextConfiguration?: Map | null, domains?: Array | null, git?: { __typename?: 'GitConfiguration', url?: string | null } | null, workspace?: { __typename?: 'ShellWorkspace', bucketPrefix?: string | null, cluster?: string | null, region?: string | null, network?: { __typename?: 'NetworkConfiguration', pluralDns?: boolean | null, subdomain?: string | null } | null } | null }; + export type DemoProjectFragment = { __typename?: 'DemoProject', id: string, projectId: string, credentials?: string | null, ready?: boolean | null, state?: DemoProjectState | null }; +export type ShellConfigurationQueryVariables = Exact<{ [key: string]: never; }>; + + +export type ShellConfigurationQuery = { __typename?: 'RootQueryType', shellConfiguration?: { __typename?: 'ShellConfiguration', contextConfiguration?: Map | null, domains?: Array | null, git?: { __typename?: 'GitConfiguration', url?: string | null } | null, workspace?: { __typename?: 'ShellWorkspace', bucketPrefix?: string | null, cluster?: string | null, region?: string | null, network?: { __typename?: 'NetworkConfiguration', pluralDns?: boolean | null, subdomain?: string | null } | null } | null } | null }; + export type GetShellQueryVariables = Exact<{ [key: string]: never; }>; export type GetShellQuery = { __typename?: 'RootQueryType', shell?: { __typename?: 'CloudShell', id: string, aesKey: string, gitUrl: string, alive: boolean, provider: Provider, subdomain: string, cluster: string, status?: { __typename?: 'ShellStatus', ready?: boolean | null, initialized?: boolean | null, containersReady?: boolean | null, podScheduled?: boolean | null } | null } | null }; +export type SetupShellMutationVariables = Exact<{ [key: string]: never; }>; + + +export type SetupShellMutation = { __typename?: 'RootMutationType', setupShell?: { __typename?: 'CloudShell', id: string, missing?: Array | null } | null }; + export type DeleteShellMutationVariables = Exact<{ [key: string]: never; }>; @@ -7589,6 +7601,24 @@ export const CloudShellFragmentDoc = gql` } } `; +export const ShellConfigurationFragmentDoc = gql` + fragment ShellConfiguration on ShellConfiguration { + contextConfiguration + domains + git { + url + } + workspace { + bucketPrefix + cluster + region + network { + pluralDns + subdomain + } + } +} + `; export const DemoProjectFragmentDoc = gql` fragment DemoProject on DemoProject { id @@ -10678,6 +10708,45 @@ export type GetTfProviderScaffoldQueryHookResult = ReturnType; export type GetTfProviderScaffoldSuspenseQueryHookResult = ReturnType; export type GetTfProviderScaffoldQueryResult = Apollo.QueryResult; +export const ShellConfigurationDocument = gql` + query ShellConfiguration { + shellConfiguration { + ...ShellConfiguration + } +} + ${ShellConfigurationFragmentDoc}`; + +/** + * __useShellConfigurationQuery__ + * + * To run a query within a React component, call `useShellConfigurationQuery` and pass it any options that fit your needs. + * When your component renders, `useShellConfigurationQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useShellConfigurationQuery({ + * variables: { + * }, + * }); + */ +export function useShellConfigurationQuery(baseOptions?: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(ShellConfigurationDocument, options); + } +export function useShellConfigurationLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(ShellConfigurationDocument, options); + } +export function useShellConfigurationSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useSuspenseQuery(ShellConfigurationDocument, options); + } +export type ShellConfigurationQueryHookResult = ReturnType; +export type ShellConfigurationLazyQueryHookResult = ReturnType; +export type ShellConfigurationSuspenseQueryHookResult = ReturnType; +export type ShellConfigurationQueryResult = Apollo.QueryResult; export const GetShellDocument = gql` query GetShell { shell { @@ -10717,6 +10786,39 @@ export type GetShellQueryHookResult = ReturnType; export type GetShellLazyQueryHookResult = ReturnType; export type GetShellSuspenseQueryHookResult = ReturnType; export type GetShellQueryResult = Apollo.QueryResult; +export const SetupShellDocument = gql` + mutation SetupShell { + setupShell { + id + missing + } +} + `; +export type SetupShellMutationFn = Apollo.MutationFunction; + +/** + * __useSetupShellMutation__ + * + * To run a mutation, you first call `useSetupShellMutation` within a React component and pass it any options that fit your needs. + * When your component renders, `useSetupShellMutation` returns a tuple that includes: + * - A mutate function that you can call at any time to execute the mutation + * - An object with fields that represent the current status of the mutation's execution + * + * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2; + * + * @example + * const [setupShellMutation, { data, loading, error }] = useSetupShellMutation({ + * variables: { + * }, + * }); + */ +export function useSetupShellMutation(baseOptions?: Apollo.MutationHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useMutation(SetupShellDocument, options); + } +export type SetupShellMutationHookResult = ReturnType; +export type SetupShellMutationResult = Apollo.MutationResult; +export type SetupShellMutationOptions = Apollo.BaseMutationOptions; export const DeleteShellDocument = gql` mutation DeleteShell { deleteShell { @@ -12078,6 +12180,7 @@ export const namedOperations = { Scaffolds: 'Scaffolds', GetTfProviders: 'GetTfProviders', GetTfProviderScaffold: 'GetTfProviderScaffold', + ShellConfiguration: 'ShellConfiguration', GetShell: 'GetShell', GetTerraform: 'GetTerraform', GetTerraformInstallations: 'GetTerraformInstallations', @@ -12137,6 +12240,7 @@ export const namedOperations = { UnlockRepository: 'UnlockRepository', DeleteRepository: 'DeleteRepository', Release: 'Release', + SetupShell: 'SetupShell', DeleteShell: 'DeleteShell', UploadTerraform: 'UploadTerraform', UninstallTerraform: 'UninstallTerraform', @@ -12233,6 +12337,7 @@ export const namedOperations = { Dependencies: 'Dependencies', Integration: 'Integration', CloudShell: 'CloudShell', + ShellConfiguration: 'ShellConfiguration', DemoProject: 'DemoProject', Terraform: 'Terraform', TerraformInstallation: 'TerraformInstallation', diff --git a/www/src/graph/shells.graphql b/www/src/graph/shells.graphql index 301da92f7c..d8d1c85355 100644 --- a/www/src/graph/shells.graphql +++ b/www/src/graph/shells.graphql @@ -14,6 +14,23 @@ fragment CloudShell on CloudShell { } } +fragment ShellConfiguration on ShellConfiguration { + contextConfiguration + domains + git { + url + } + workspace { + bucketPrefix + cluster + region + network { + pluralDns + subdomain + } + } +} + fragment DemoProject on DemoProject { id projectId @@ -22,12 +39,25 @@ fragment DemoProject on DemoProject { state } +query ShellConfiguration { + shellConfiguration { + ...ShellConfiguration + } +} + query GetShell { shell { ...CloudShell } } +mutation SetupShell { + setupShell { + id + missing + } +} + mutation DeleteShell { deleteShell { ...CloudShell