shell

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(

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()

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) {

www/src/components/shell/terminal/Content.tsx

@@ -1,21 +1,24 @@
-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'
 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'
 
 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 (
     <Div height="calc(100% - 48px)">
-      {!IsEmpty(setupShellData?.missing) && (
+      {!IsEmpty(setupData?.setupShell?.missing) && (
         <MissingPermissionsModal
           refetch={setupShell}
-          missing={setupShellData.missing}
+          missing={setupData?.setupShell?.missing}
         />
       )}
 

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 (
     <Modal

www/src/components/shell/terminal/context/terminal.ts

@@ -1,6 +1,9 @@
 import { Dispatch, SetStateAction, createContext } from 'react'
 
-import { CloudShell, ShellConfiguration } from '../../../../generated/graphql'
+import {
+  CloudShell,
+  ShellConfigurationFragment,
+} from '../../../../generated/graphql'
 
 enum State {
   New = 'New',
@@ -9,7 +12,7 @@ enum State {
 
 interface ContextProps {
   shell: CloudShell
-  configuration: ShellConfiguration
+  configuration: Nullable<ShellConfigurationFragment>
   state: State
   setState: Dispatch<SetStateAction<State>>
   onAction?: Dispatch<string>

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<string, unknown> | null, domains?: Array<string | null> | 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<string, unknown> | null, domains?: Array<string | null> | 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<string | null> | 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<typeof useGetTfPro
 export type GetTfProviderScaffoldLazyQueryHookResult = ReturnType<typeof useGetTfProviderScaffoldLazyQuery>;
 export type GetTfProviderScaffoldSuspenseQueryHookResult = ReturnType<typeof useGetTfProviderScaffoldSuspenseQuery>;
 export type GetTfProviderScaffoldQueryResult = Apollo.QueryResult<GetTfProviderScaffoldQuery, GetTfProviderScaffoldQueryVariables>;
+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<ShellConfigurationQuery, ShellConfigurationQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ShellConfigurationQuery, ShellConfigurationQueryVariables>(ShellConfigurationDocument, options);
+      }
+export function useShellConfigurationLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ShellConfigurationQuery, ShellConfigurationQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ShellConfigurationQuery, ShellConfigurationQueryVariables>(ShellConfigurationDocument, options);
+        }
+export function useShellConfigurationSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<ShellConfigurationQuery, ShellConfigurationQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<ShellConfigurationQuery, ShellConfigurationQueryVariables>(ShellConfigurationDocument, options);
+        }
+export type ShellConfigurationQueryHookResult = ReturnType<typeof useShellConfigurationQuery>;
+export type ShellConfigurationLazyQueryHookResult = ReturnType<typeof useShellConfigurationLazyQuery>;
+export type ShellConfigurationSuspenseQueryHookResult = ReturnType<typeof useShellConfigurationSuspenseQuery>;
+export type ShellConfigurationQueryResult = Apollo.QueryResult<ShellConfigurationQuery, ShellConfigurationQueryVariables>;
 export const GetShellDocument = gql`
     query GetShell {
   shell {
@@ -10717,6 +10786,39 @@ export type GetShellQueryHookResult = ReturnType<typeof useGetShellQuery>;
 export type GetShellLazyQueryHookResult = ReturnType<typeof useGetShellLazyQuery>;
 export type GetShellSuspenseQueryHookResult = ReturnType<typeof useGetShellSuspenseQuery>;
 export type GetShellQueryResult = Apollo.QueryResult<GetShellQuery, GetShellQueryVariables>;
+export const SetupShellDocument = gql`
+    mutation SetupShell {
+  setupShell {
+    id
+    missing
+  }
+}
+    `;
+export type SetupShellMutationFn = Apollo.MutationFunction<SetupShellMutation, SetupShellMutationVariables>;
+
+/**
+ * __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<SetupShellMutation, SetupShellMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<SetupShellMutation, SetupShellMutationVariables>(SetupShellDocument, options);
+      }
+export type SetupShellMutationHookResult = ReturnType<typeof useSetupShellMutation>;
+export type SetupShellMutationResult = Apollo.MutationResult<SetupShellMutation>;
+export type SetupShellMutationOptions = Apollo.BaseMutationOptions<SetupShellMutation, SetupShellMutationVariables>;
 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',

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