Created a widget for placeholder view in react-components

Move the placeholder widget to the react-components npm package

This would allow it to be used by both theia and vscode extension

Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>

packages/react-components/src/trace-explorer/trace-explorer-placeholder-widget.tsx

@@ -0,0 +1,34 @@
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as React from 'react';
+
+export interface ReactPlaceholderWidgetProps {
+    loading: boolean;
+    handleOpenTrace: () => void;
+}
+
+export class ReactExplorerPlaceholderWidget extends React.Component<ReactPlaceholderWidgetProps, unknown> {
+    constructor(props: ReactPlaceholderWidgetProps) {
+        super(props);
+    }
+
+    render(): React.ReactNode {
+        return <div className='placeholder-container' tabIndex={0}>
+            <div className='center'>{'You have not yet opened a trace.'}</div>
+            <div className='placeholder-open-workspace-button-container'>
+                <button className='plcaeholder-open-workspace-button' title='Select a trace to open'
+                    onClick={this.props.handleOpenTrace} disabled={this.props.loading}>
+                    {this.props.loading && (
+                        <FontAwesomeIcon
+                            icon={faSpinner}
+                            spin
+                            style={{ marginRight: '5px' }}
+                        />
+                    )}
+                    {this.props.loading && <span>Connecting to trace server</span>}
+                    {!this.props.loading && <span>Open Trace</span>}
+                </button>
+            </div>
+        </div>;
+    }
+}

packages/react-components/style/trace-explorer.css

@@ -303,3 +303,35 @@
     margin-bottom: 2px;
     margin-right: 10px;
 }
+
+.placeholder-container {
+    font-size: var(--theia-ui-font-size1);
+    padding: 5px;
+    position: relative;
+}
+
+.placeholder-container .center {
+    text-align: center;
+}
+
+.placeholder-open-workspace-button-container {
+    margin: auto;
+    margin-top: 5px;
+    display: flex;
+    justify-content: center;
+    align-self: center;
+}
+
+.plcaeholder-open-workspace-button {
+    padding: 4px 12px;
+    margin-left: 0;
+    width: calc(100% - var(--theia-ui-padding)*4);
+    background: var(--theia-button-background);
+    border: none;
+    color: var(--theia-button-foreground);
+    min-width: 65px;
+    outline: none;
+    cursor: pointer;
+    padding: 4px 9px;
+    margin-left: calc(var(--theia-ui-padding)*2);
+}

theia-extensions/viewer-prototype/src/browser/trace-explorer/trace-explorer-sub-widgets/trace-explorer-placeholder-widget.tsx → theia-extensions/viewer-prototype/src/browser/trace-explorer/trace-explorer-sub-widgets/theia-trace-explorer-placeholder-widget.tsx

@@ -3,10 +3,10 @@ import { ReactWidget } from '@theia/core/lib/browser';
 import * as React from 'react';
 import { CommandService } from '@theia/core';
 import { OpenTraceCommand } from '../../trace-viewer/trace-viewer-commands';
+import {ReactExplorerPlaceholderWidget} from 'traceviewer-react-components/lib/trace-explorer/trace-explorer-placeholder-widget';
 
 @injectable()
 export class TraceExplorerPlaceholderWidget extends ReactWidget {
-
     static ID = 'trace-explorer-placeholder-widget';
     static LABEL = 'Trace Explorer Placeholder Widget';
 
@@ -29,22 +29,12 @@ export class TraceExplorerPlaceholderWidget extends ReactWidget {
 
     render(): React.ReactNode {
         const { loading } = this.state;
-        return <div className='theia-navigator-container' tabIndex={0}>
-            <div className='center'>{'You have not yet opened a trace.'}</div>
-            <div className='open-workspace-button-container'>
-                <button className='theia-button open-workspace-button' title='Select a trace to open'
-                    onClick={this.handleOpenTrace} disabled={loading}>
-                    {loading && (
-                        <i
-                            className='fa fa-refresh fa-spin'
-                            style={{ marginRight: '5px' }}
-                        />
-                    )}
-                    {loading && <span>Connecting to trace server</span>}
-                    {!loading && <span>Open Trace</span>}
-                </button>
-            </div>
-        </div>;
+        return (
+            <ReactExplorerPlaceholderWidget
+                loading={loading}
+                handleOpenTrace={this.handleOpenTrace}
+            ></ReactExplorerPlaceholderWidget>
+        );
     }
 
     protected handleOpenTrace = async (): Promise<void> => this.doHandleOpenTrace();

theia-extensions/viewer-prototype/src/browser/trace-explorer/trace-explorer-widget.tsx

@@ -3,7 +3,7 @@ import { TraceExplorerViewsWidget } from './trace-explorer-sub-widgets/theia-tra
 import { ViewContainer, BaseWidget, Message, PanelLayout } from '@theia/core/lib/browser';
 import { TraceExplorerItemPropertiesWidget } from './trace-explorer-sub-widgets/theia-trace-explorer-properties-widget';
 import { TraceExplorerOpenedTracesWidget } from './trace-explorer-sub-widgets/theia-trace-explorer-opened-traces-widget';
-import { TraceExplorerPlaceholderWidget } from './trace-explorer-sub-widgets/trace-explorer-placeholder-widget';
+import { TraceExplorerPlaceholderWidget } from './trace-explorer-sub-widgets/theia-trace-explorer-placeholder-widget';
 import { TraceExplorerServerStatusWidget } from './trace-explorer-sub-widgets/trace-explorer-server-status-widget';
 import { signalManager, Signals } from 'traceviewer-base/lib/signals/signal-manager';
 import { OpenedTracesUpdatedSignalPayload } from 'traceviewer-base/lib/signals/opened-traces-updated-signal-payload';