Feat(CLI-terminal): Open terminal in new Tab

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

@@ -35,8 +35,8 @@ const CloudShellDrawer: React.FC<CloudShellDrawerProps> = ({ children, onClose }
           <Button
             variant="plain"
             component="a"
+            href="/cloudshell"
             // change this once we can open terminal in new tab
-            href={null}
             target="_blank"
             aria-label="Open terminal in new tab"
           >

frontend/packages/console-app/src/components/cloud-shell/CloudShellTab.scss

@@ -0,0 +1,16 @@
+.co-cloud-shell-tab {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #000;
+  &__header {
+    height: var(--pf-global--target-size--MinHeight);
+    background-color: var(--pf-global--palette--black-200);
+    display: flex;
+    align-items: center;
+    padding-left: var(--pf-global--spacer--md);
+  }
+  &__restorelink {
+    color: var(--pf-global--primary-color--100);
+  }
+}

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import CloudShellTerminal from './CloudShellTerminal';
+import CloudShellTabHeader from './CloudShellTabHeader';
+import './CloudShellTab.scss';
+
+const CloudShellTab = () => {
+  return (
+    <div className="co-cloud-shell-tab">
+      <div className="co-cloud-shell-tab__header">
+        <CloudShellTabHeader />
+      </div>
+      <CloudShellTerminal />
+    </div>
+  );
+};
+
+export default CloudShellTab;

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Flex, FlexItem, FlexModifiers, Button } from '@patternfly/react-core';
+import { AngleLeftIcon } from '@patternfly/react-icons';
+import './CloudShellTab.scss';
+
+const CloudShellTabHeader = () => {
+  const onClose = () => {
+    window.opener = null;
+    window.open('', '_self');
+    window.close();
+  };
+  return (
+    <Flex style={{ flexGrow: 1 }}>
+      <FlexItem>
+        <span data-test-id="terminal-tab-header">Openshift command Line Terminal</span>
+      </FlexItem>
+      <FlexItem breakpointMods={[{ modifier: FlexModifiers['align-right'] }]}>
+        <Button
+          variant="plain"
+          aria-label="restore terminal in openshift console"
+          onClick={onClose}
+        >
+          <span className="co-cloud-shell-tab__restorelink" data-test-id="restore-terminal-link">
+            <AngleLeftIcon /> Restore terminal in OpenShift Console
+          </span>
+        </Button>
+      </FlexItem>
+    </Flex>
+  );
+};
+
+export default CloudShellTabHeader;

frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminalFrame.scss

@@ -1,6 +1,8 @@
 .co-cloud-shell-terminal-frame {
   background-color: #000;
+  width: 100%;
   height: 100%;
+  overflow: hidden;
 
   & > iframe {
     height: 100%;

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import store from '@console/internal/redux';
+import CloudShellTab from '../CloudShellTab';
+import CloudShellTerminal from '../CloudShellTerminal';
+
+describe('CloudShell Tab Test', () => {
+  const cloudShellTabWrapper = mount(<CloudShellTab />, {
+    wrappingComponent: ({ children }) => <Provider store={store}>{children}</Provider>,
+  });
+  it('should render correct title', () => {
+    expect(cloudShellTabWrapper.find('[data-test-id="terminal-tab-header"]').exists()).toBe(true);
+    expect(cloudShellTabWrapper.find('[data-test-id="terminal-tab-header"]').text()).toEqual(
+      'Openshift command Line Terminal',
+    );
+  });
+  it('should render restore button', () => {
+    expect(cloudShellTabWrapper.find('[data-test-id="restore-terminal-link"]').exists()).toBe(true);
+    expect(cloudShellTabWrapper.find('[data-test-id="restore-terminal-link"]').text()).toEqual(
+      ' Restore terminal in OpenShift Console',
+    );
+  });
+  it('should render cloudshellterminal', () => {
+    expect(cloudShellTabWrapper.find(CloudShellTerminal).exists()).toBe(true);
+  });
+});

frontend/public/components/app.jsx

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { render } from 'react-dom';
 import { Helmet } from 'react-helmet';
 import { Provider } from 'react-redux';
-import { Route, Router } from 'react-router-dom';
+import { Route, Router, Switch } from 'react-router-dom';
 // AbortController is not supported in some older browser versions
 import 'abort-controller/polyfill';
 import CloudShell from '@console/app/src/components/cloud-shell/CloudShell';
-
+import CloudShellTab from '@console/app/src/components/cloud-shell/CloudShellTab';
 import store from '../redux';
 import { detectFeatures } from '../actions/features';
 import AppContents from './app-contents';
@@ -227,7 +227,10 @@ if ('serviceWorker' in navigator) {
 render(
   <Provider store={store}>
     <Router history={history} basename={window.SERVER_FLAGS.basePath}>
-      <Route path="/" component={App} />
+      <Switch>
+        <Route path="/cloudshell" component={CloudShellTab} />
+        <Route path="/" component={App} />
+      </Switch>
     </Router>
   </Provider>,
   document.getElementById('app'),