Bug 2006329: Allow web terminal to be installed in any namespace

frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminal.tsx

@@ -12,12 +12,13 @@ import {
 } from '@console/shared';
 import { FLAG_V1ALPHA2DEVWORKSPACE } from '../../consts';
 import { v1alpha1WorkspaceModel, WorkspaceModel } from '../../models';
-import { TerminalInitData, initTerminal } from './cloud-shell-utils';
+import { TerminalInitData, initTerminal, startWorkspace } from './cloud-shell-utils';
 import CloudshellExec from './CloudShellExec';
 import { CLOUD_SHELL_NAMESPACE, CLOUD_SHELL_NAMESPACE_CONFIG_STORAGE_KEY } from './const';
 import CloudShellAdminSetup from './setup/CloudShellAdminSetup';
 import CloudShellDeveloperSetup from './setup/CloudShellDeveloperSetup';
 import TerminalLoadingBox from './TerminalLoadingBox';
+import useCloudShellNamespace from './useCloudShellNamespace';
 import useCloudShellWorkspace from './useCloudShellWorkspace';
 
 import './CloudShellTerminal.scss';
@@ -39,6 +40,7 @@ const CloudShellTerminal: React.FC<CloudShellTerminalProps &
   userSettingState: namespace,
   setUserSettingState: setNamespace,
 }) => {
+  const [operatorNamespace, namespaceLoadError] = useCloudShellNamespace();
   const [initData, setInitData] = React.useState<TerminalInitData>();
   const [initError, setInitError] = React.useState<string>();
   const [isAdmin, isAdminCheckLoading] = useAccessReview2({
@@ -63,6 +65,38 @@ const CloudShellTerminal: React.FC<CloudShellTerminalProps &
 
   const { t } = useTranslation();
 
+  const unrecoverableErrorFound = !operatorNamespace && namespaceLoadError;
+
+  // wait until the web terminal is loaded.
+  // if the namespace has any problems loading then set the terminal into an unrecoverable state
+  React.useEffect(() => {
+    if (namespaceLoadError) {
+      setInitError(namespaceLoadError);
+    }
+  }, [namespaceLoadError]);
+
+  // start the workspace if no unrecoverable errors were found
+  React.useEffect(() => {
+    if (
+      operatorNamespace &&
+      !unrecoverableErrorFound &&
+      workspace?.spec &&
+      !workspace.spec.started
+    ) {
+      startWorkspace(workspace);
+    }
+    // Run this effect if the workspace name or namespace changes.
+    // This effect should only be run once per workspace.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    operatorNamespace,
+    unrecoverableErrorFound,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    workspace?.metadata?.name,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    workspace?.metadata?.namespace,
+  ]);
+
   // save the namespace once the workspace has loaded
   React.useEffect(() => {
     if (loaded && !loadError) {
@@ -71,11 +105,13 @@ const CloudShellTerminal: React.FC<CloudShellTerminalProps &
     }
   }, [loaded, loadError, workspaceNamespace, setNamespace]);
 
-  // clear the init data and error if the workspace changes
+  // clear the init data and error if the workspace changes and if the loading process isn't in an unrecoverable state
   React.useEffect(() => {
-    setInitData(undefined);
-    setInitError(undefined);
-  }, [username, workspaceName, workspaceNamespace]);
+    if (!unrecoverableErrorFound) {
+      setInitData(undefined);
+      setInitError(undefined);
+    }
+  }, [unrecoverableErrorFound, username, workspaceName, workspaceNamespace]);
 
   // initialize the terminal once it is Running
   React.useEffect(() => {
@@ -132,7 +168,7 @@ const CloudShellTerminal: React.FC<CloudShellTerminalProps &
   }
 
   // loading the workspace resource
-  if (!loaded || isAdminCheckLoading) {
+  if (!loaded || isAdminCheckLoading || !operatorNamespace) {
     return <TerminalLoadingBox message="" />;
   }
 
@@ -165,6 +201,7 @@ const CloudShellTerminal: React.FC<CloudShellTerminalProps &
           setNamespace(ns);
         }}
         workspaceModel={workspaceModel}
+        operatorNamespace={operatorNamespace}
       />
     );
   }
@@ -177,6 +214,7 @@ const CloudShellTerminal: React.FC<CloudShellTerminalProps &
       onSubmit={(ns: string) => {
         setNamespace(ns);
       }}
+      operatorNamespace={operatorNamespace}
     />
   );
 };

frontend/packages/console-app/src/components/cloud-shell/__tests__/CloudShellTerminal.spec.tsx

@@ -5,13 +5,18 @@ import { useFlag } from '@console/shared';
 import { InternalCloudShellTerminal } from '../CloudShellTerminal';
 import CloudShellDeveloperSetup from '../setup/CloudShellDeveloperSetup';
 import TerminalLoadingBox from '../TerminalLoadingBox';
+import useCloudShellNamespace from '../useCloudShellNamespace';
 import useCloudShellWorkspace from '../useCloudShellWorkspace';
 import { user } from './cloud-shell-test-data';
 
 jest.mock('../useCloudShellWorkspace', () => ({
   default: jest.fn(),
 }));
 
+jest.mock('../useCloudShellNamespace', () => ({
+  default: jest.fn(),
+}));
+
 jest.mock('@console/internal/components/utils/rbac', () => ({
   useAccessReview2: () => [false, false],
 }));
@@ -36,6 +41,7 @@ describe('CloudShellTerminal', () => {
   it('should display loading box', () => {
     useFlagMock.mockReturnValue(true);
     (useCloudShellWorkspace as jest.Mock).mockReturnValueOnce([null, false]);
+    (useCloudShellNamespace as jest.Mock).mockReturnValueOnce(['sample-namespace', '']);
     const wrapper = shallow(
       <InternalCloudShellTerminal
         user={user}
@@ -49,6 +55,7 @@ describe('CloudShellTerminal', () => {
   it('should display error statusBox', () => {
     useFlagMock.mockReturnValue(true);
     (useCloudShellWorkspace as jest.Mock).mockReturnValueOnce([null, false, true]);
+    (useCloudShellNamespace as jest.Mock).mockReturnValueOnce(['sample-namespace', '']);
     const wrapper = shallow(
       <InternalCloudShellTerminal
         user={user}
@@ -62,6 +69,7 @@ describe('CloudShellTerminal', () => {
   it('should display form if loaded and no workspace', () => {
     useFlagMock.mockReturnValue(true);
     (useCloudShellWorkspace as jest.Mock).mockReturnValueOnce([[], true]);
+    (useCloudShellNamespace as jest.Mock).mockReturnValueOnce(['sample-namespace', '']);
     const wrapper = shallow(
       <InternalCloudShellTerminal
         user={user}

frontend/packages/console-app/src/components/cloud-shell/__tests__/cloud-shell-utils.spec.ts

@@ -10,7 +10,7 @@ describe('CloudShell Utils', () => {
     const namespace = 'default';
     const kind = 'DevWorkspace';
 
-    const newResource = newCloudShellWorkSpace(name, namespace, 'v1alpha2');
+    const newResource = newCloudShellWorkSpace(name, namespace, namespace, 'v1alpha2');
     expect(newResource.kind).toEqual(kind);
     expect(newResource.metadata.name).toEqual(name);
     expect(newResource.metadata.namespace).toEqual(namespace);

frontend/packages/console-app/src/components/cloud-shell/cloud-shell-utils.ts

@@ -62,13 +62,13 @@ const v1alpha1DevworkspaceComponent = [
   },
 ];
 
-const devWorkspaceComponent = [
+const devWorkspaceComponent = (namespace: string) => [
   {
     name: 'web-terminal-tooling',
     plugin: {
       kubernetes: {
         name: 'web-terminal-tooling',
-        namespace: 'openshift-operators',
+        namespace,
       },
     },
   },
@@ -77,22 +77,23 @@ const devWorkspaceComponent = [
     plugin: {
       kubernetes: {
         name: 'web-terminal-exec',
-        namespace: 'openshift-operators',
+        namespace,
       },
     },
   },
 ];
 
 export const newCloudShellWorkSpace = (
   name: string,
-  namespace: string,
+  workspaceNamespace: string,
+  operatorNamespace: string,
   version: string,
 ): CloudShellResource => ({
   apiVersion: `workspace.devfile.io/${version}`,
   kind: 'DevWorkspace',
   metadata: {
     name,
-    namespace,
+    namespace: workspaceNamespace,
     labels: {
       [CLOUD_SHELL_LABEL]: 'true',
     },
@@ -107,7 +108,7 @@ export const newCloudShellWorkSpace = (
       components:
         version === v1alpha1WorkspaceModel.apiVersion
           ? v1alpha1DevworkspaceComponent
-          : devWorkspaceComponent,
+          : devWorkspaceComponent(operatorNamespace),
     },
   },
 });
@@ -153,3 +154,5 @@ export const checkTerminalAvailable = () => coFetch('/api/terminal/available');
 export const getCloudShellCR = (workspaceModel: K8sKind, name: string, ns: string) => {
   return k8sGet(workspaceModel, name, ns);
 };
+
+export const getTerminalInstalledNamespace = () => coFetch('/api/terminal/installedNamespace');

frontend/packages/console-app/src/components/cloud-shell/setup/CloudShellAdminSetup.tsx

@@ -14,9 +14,14 @@ import TerminalLoadingBox from '../TerminalLoadingBox';
 type Props = {
   onInitialize: (namespace: string) => void;
   workspaceModel: K8sKind;
+  operatorNamespace: string;
 };
 
-const CloudShellAdminSetup: React.FunctionComponent<Props> = ({ onInitialize, workspaceModel }) => {
+const CloudShellAdminSetup: React.FunctionComponent<Props> = ({
+  onInitialize,
+  workspaceModel,
+  operatorNamespace,
+}) => {
   const { t } = useTranslation();
 
   const [initError, setInitError] = React.useState<string>();
@@ -48,6 +53,7 @@ const CloudShellAdminSetup: React.FunctionComponent<Props> = ({ onInitialize, wo
           newCloudShellWorkSpace(
             createCloudShellResourceName(),
             CLOUD_SHELL_PROTECTED_NAMESPACE,
+            operatorNamespace,
             workspaceModel.apiVersion,
           ),
         );

frontend/packages/console-app/src/components/cloud-shell/setup/CloudShellDeveloperSetup.tsx

@@ -23,11 +23,13 @@ type Props = StateProps & {
   onSubmit?: (namespace: string) => void;
   onCancel?: () => void;
   workspaceModel: K8sKind;
+  operatorNamespace: string;
 };
 
 const CloudShellDeveloperSetup: React.FunctionComponent<Props> = ({
   activeNamespace,
   workspaceModel,
+  operatorNamespace,
   onSubmit,
   onCancel,
 }) => {
@@ -53,6 +55,7 @@ const CloudShellDeveloperSetup: React.FunctionComponent<Props> = ({
         newCloudShellWorkSpace(
           createCloudShellResourceName(),
           namespace,
+          operatorNamespace,
           workspaceModel.apiVersion,
         ),
       );

frontend/packages/console-app/src/components/cloud-shell/useCloudShellNamespace.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useSafetyFirst } from '@console/internal/components/safety-first';
+import { getTerminalInstalledNamespace } from './cloud-shell-utils';
+
+const useCloudShellNamespace = (): [string, string] => {
+  const [terminalNamespace, setTerminalNamespace] = useSafetyFirst<string>(undefined);
+  const [fetchError, setFetchError] = useSafetyFirst<string>(undefined);
+  React.useEffect(() => {
+    const fetchNamespace = async () => {
+      try {
+        if (!terminalNamespace) {
+          const namespaceRequest = await getTerminalInstalledNamespace();
+          const namespace = await namespaceRequest.text();
+          setTerminalNamespace(namespace);
+        }
+      } catch (e) {
+        const errorMessage = await e.response.text();
+        setFetchError(errorMessage);
+      }
+    };
+    fetchNamespace();
+  }, [setFetchError, setTerminalNamespace, terminalNamespace]);
+
+  return [terminalNamespace, fetchError];
+};
+
+export default useCloudShellNamespace;

frontend/packages/console-app/src/components/cloud-shell/useCloudShellWorkspace.ts

@@ -10,7 +10,6 @@ import {
   CLOUD_SHELL_CREATOR_LABEL,
   CloudShellResource,
   CLOUD_SHELL_RESTRICTED_ANNOTATION,
-  startWorkspace,
   CLOUD_SHELL_PROTECTED_NAMESPACE,
 } from './cloud-shell-utils';
 
@@ -158,15 +157,6 @@ const useCloudShellWorkspace = (
     workspaceModel,
   ]);
 
-  React.useEffect(() => {
-    if (workspace?.spec && !workspace.spec.started) {
-      startWorkspace(workspace);
-    }
-    // Run this effect if the workspace name or namespace changes.
-    // This effect should only be run once per workspace.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [workspace?.metadata?.name, workspace?.metadata?.namespace]);
-
   return [
     workspace,
     // loaded if we have a resource loaded and currently not searching

pkg/server/server.go

@@ -274,6 +274,7 @@ func (s *Server) HTTPHandler() http.Handler {
 
 	handle(terminal.ProxyEndpoint, authHandlerWithUser(terminalProxy.HandleProxy))
 	handleFunc(terminal.AvailableEndpoint, terminalProxy.HandleProxyEnabled)
+	handleFunc(terminal.InstalledNamespaceEndpoint, terminalProxy.HandleTerminalInstalledNamespace)
 
 	graphQLSchema, err := ioutil.ReadFile("pkg/graphql/schema.graphql")
 	if err != nil {