From 5a0af441e4fe5f03ac031e8b46eee41840956b24 Mon Sep 17 00:00:00 2001
From: Jessica He <jhe@redhat.com>
Date: Fri, 19 May 2023 11:21:58 -0400
Subject: [PATCH] Add 'Show welcome page on startup' checkbox

Signed-off-by: Jessica He <jhe@redhat.com>
---
 USAGE_DATA.md                            |  5 ++++-
 package.json                             |  2 +-
 src/telemetry.ts                         |  4 ++++
 src/webview/welcome/app/index.tsx        |  5 +++++
 src/webview/welcome/app/welcome.scss     |  5 ++---
 src/webview/welcome/app/welcomePage.tsx  | 25 ++++++++++++++++++++----
 src/webview/welcome/welcomeViewLoader.ts | 16 +++++++++++++++
 7 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/USAGE_DATA.md b/USAGE_DATA.md
index 147691d6a..13a03e640 100644
--- a/USAGE_DATA.md
+++ b/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
\ No newline at end of file
+* Duration of request in milliseconds
diff --git a/package.json b/package.json
index 8042554a7..9ee3c6d27 100644
--- a/package.json
+++ b/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",
diff --git a/src/telemetry.ts b/src/telemetry.ts
index 697e1334a..d441f461a 100644
--- a/src/telemetry.ts
+++ b/src/telemetry.ts
@@ -72,3 +72,7 @@ export class ExtCommandTelemetryEvent {
         this.send({error})
     }
 }
+
+export interface WelcomePageProps {
+    showWelcomePage: boolean;
+}
diff --git a/src/webview/welcome/app/index.tsx b/src/webview/welcome/app/index.tsx
index 63c1e6288..ec859de45 100644
--- a/src/webview/welcome/app/index.tsx
+++ b/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'),
diff --git a/src/webview/welcome/app/welcome.scss b/src/webview/welcome/app/welcome.scss
index c43f42e8a..942a2cfac 100644
--- a/src/webview/welcome/app/welcome.scss
+++ b/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 {
diff --git a/src/webview/welcome/app/welcomePage.tsx b/src/webview/welcome/app/welcomePage.tsx
index 45fc5c100..ec1e3b285 100644
--- a/src/webview/welcome/app/welcomePage.tsx
+++ b/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,13 +19,15 @@ 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
         }
     }
 
@@ -33,6 +35,8 @@ export class Welcome extends React.Component<DefaultProps, {
         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' />
         </>;
     }
diff --git a/src/webview/welcome/welcomeViewLoader.ts b/src/webview/welcome/welcomeViewLoader.ts
index e55b514ec..258a33f02 100644
--- a/src/webview/welcome/welcomeViewLoader.ts
+++ b/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(
                 {