Add 'Show welcome page on startup' checkbox

USAGE_DATA.md

@@ -63,7 +63,10 @@ As a user goes through Sandbox provisioning workflow the editor reports outcome
 * Validation of a verification code (identifier: `openshift.explorer.addCluster.sandboxValidateVerificationCode`)
 * Login into Sandbox cluster (identifier: `openshift.explorer.addCluster.sandboxLoginUsingDataInClipboard`)
 
+### Openshift Welcome Page
+The welcome page reports when the user unchecks/checks the show welcome page option.
+
 Each telemetry event includes:
 * Unique step identifier
 * Error text in case of step's failure
-* Duration of request in milliseconds
+* Duration of request in milliseconds

package.json

@@ -1500,7 +1500,7 @@
 					"openshiftToolkit.showWelcomePage": {
 						"type": "boolean",
 						"default": true,
-						"description": "Show Welcome Page when using OpenShift Toolkit Extension."
+						"description": "Show welcome page when using OpenShift Toolkit extension."
 					},
 					"openshiftToolkit.showChannelOnOutput": {
 						"type": "boolean",

src/telemetry.ts

@@ -72,3 +72,7 @@ export class ExtCommandTelemetryEvent {
         this.send({error})
     }
 }
+
+export interface WelcomePageProps {
+    showWelcomePage: boolean;
+}

src/webview/welcome/app/index.tsx

@@ -10,6 +10,11 @@ import { VSCodeMessage } from './vsCodeMessage';
 VSCodeMessage.postMessage({
     'action': 'getOpenShiftVersion'
 })
+
+VSCodeMessage.postMessage({
+    'action': 'getShowWelcomePageConfig'
+});
+
 ReactDOM.render(
     <Welcome />,
     document.getElementById('root'),

src/webview/welcome/app/welcome.scss

@@ -74,9 +74,8 @@ header {
 }
 
 .content__image__preview {
-    max-width: 100%;
-    width: 400px;
-    height: 400px;
+    max-width: 400px;
+    max-height: 400px;
 }
 
 .last__image {

src/webview/welcome/app/welcomePage.tsx

@@ -4,7 +4,7 @@
  *-----------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { VSCodeMessage } from './vsCodeMessage';
-import { Icon, Stack, Typography } from '@mui/material';
+import { Checkbox, FormControlLabel, Icon, Stack, Typography } from '@mui/material';
 import HelpIcon from '@mui/icons-material/Help';
 import ChatIcon from '@mui/icons-material/Chat';
 import BugReportIcon from '@mui/icons-material/BugReport';
@@ -19,20 +19,24 @@ export interface DefaultProps {
 }
 
 export class Welcome extends React.Component<DefaultProps, {
-    lastRelease: string
+    lastRelease: string,
+    isChecked: boolean
 }> {
 
     constructor(props) {
         super(props);
         this.state = {
-            lastRelease: ''
+            lastRelease: '',
+            isChecked: true
         }
     }
 
     componentDidMount(): void {
         VSCodeMessage.onMessage((message) => {
             if (message.data.action === 'getOpenShiftVersion') {
                 this.setState({ lastRelease: message.data.param })
+            } else if (message.data.action === 'getShowWelcomePageConfig') {
+                this.setState({ isChecked: message.data.param })
             }
         });
     }
@@ -67,6 +71,15 @@ export class Welcome extends React.Component<DefaultProps, {
         return;
     }
 
+    updateShowWelcomePageConfig = e => {
+        this.setState({ isChecked: e.target.checked })
+        VSCodeMessage.postMessage({
+            'action': 'updateShowWelcomePageConfig',
+            'param': e.target.checked
+        });
+        return;
+    }
+
     footer = <footer id='footer'>
         <div className='foot-col-1' >
             <div className='setting__input setting__input--big footer__input' style={{ width: '30%' }}>
@@ -216,7 +229,7 @@ export class Welcome extends React.Component<DefaultProps, {
     </footer>
 
     render(): React.ReactNode {
-        const { lastRelease } = this.state;
+        const { lastRelease, isChecked } = this.state;
         return <>
             <header className='header__logo'>
                 <img className='image__logo' src={require('../../../../images/title/logo.svg').default} />
@@ -374,6 +387,10 @@ export class Welcome extends React.Component<DefaultProps, {
                     {this.footer}
                 </div>
             </div>
+            <div className='header__logo'>
+                <FormControlLabel control={<Checkbox checked={isChecked} onChange={this.updateShowWelcomePageConfig} sx={{ color: 'var(--vscode-foreground)', '&.Mui-checked': { color: 'var(--vscode-foreground)' } }} />}
+                    label={<Typography variant='h3' style={{ fontSize: 12 }}>Show welcome page when using OpenShift Toolkit extension</Typography>} />
+            </div>
             <ScrollToTop smooth style={{ background: '#EE0000' }} color='#FFFFFF' />
         </>;
     }

src/webview/welcome/welcomeViewLoader.ts

@@ -6,6 +6,7 @@ import * as vscode from 'vscode';
 import * as path from 'path';
 import * as fs from 'fs';
 import { ExtensionID } from '../../util/constants';
+import sendTelemetry, { WelcomePageProps } from '../../telemetry';
 const request = require('request');
 
 let panel: vscode.WebviewPanel;
@@ -42,6 +43,21 @@ async function welcomeViewerMessageListener(event: any): Promise<any> {
         case 'openDevfileRegistry':
             await vscode.commands.executeCommand('openshift.componentTypesView.registry.openInView');
             break;
+        case 'getShowWelcomePageConfig':
+            panel.webview.postMessage({
+                'action': 'getShowWelcomePageConfig',
+                'param': vscode.workspace.getConfiguration('openshiftToolkit').get('showWelcomePage')
+            });
+        case 'updateShowWelcomePageConfig':
+            const checkboxValue: boolean = event.param;
+            let telemetryProps: WelcomePageProps = {
+                showWelcomePage: checkboxValue
+            };
+            sendTelemetry('welcomePage', telemetryProps);
+            if (checkboxValue != vscode.workspace.getConfiguration('openshiftToolkit').get('showWelcomePage')) {
+                return vscode.workspace.getConfiguration().update('openshiftToolkit.showWelcomePage', checkboxValue, vscode.ConfigurationTarget.Global);
+            }
+            break;
         default:
             panel.webview.postMessage(
                 {