Add feedback webview

.eslintignore

@@ -17,4 +17,5 @@ src/webview/devfile-registry
 src/webview/welcome
 src/webview/git-import
 src/webview/helm-chart
+src/webview/feedback
 test/sandbox-registration

build/esbuild.mjs

@@ -16,6 +16,7 @@ const webviews = [
     'helm-chart',
     'log',
     'welcome',
+    'feedback'
 ];
 
 function kebabToCamel(text) {

package.json

@@ -201,6 +201,7 @@
 		"sinon-chai": "^3.7.0",
 		"source-map-support": "^0.5.21",
 		"style-loader": "^3.3.1",
+		"survey-react-ui": "^1.9.89",
 		"targz": "^1.0.1",
 		"ts-loader": "^9.2.6",
 		"tslint": "^5.20.1",
@@ -377,6 +378,12 @@
 					"light": "images/title/light/icon-issue.svg"
 				}
 			},
+			{
+				"command": "openshift.show.feedback",
+				"title": "Share your feedback",
+				"category": "OpenShift",
+				"icon": "$(feedback)"
+			},
 			{
 				"command": "openshift.project.create",
 				"title": "New Project",
@@ -1122,6 +1129,11 @@
 					"when": "view == openshiftProjectExplorer",
 					"group": "navigation@4"
 				},
+				{
+					"command": "openshift.show.feedback",
+					"when": "view == openshiftProjectExplorer",
+					"group": "navigation@5"
+				},
 				{
 					"command": "openshift.component.createFromLocal",
 					"when": "view == openshiftComponentsView",

src/extension.ts

@@ -75,6 +75,7 @@ export async function activate(extensionContext: ExtensionContext): Promise<any>
             './componentsView',
             './webview/devfile-registry/registryViewLoader',
             './webview/helm-chart/helmChartLoader',
+            './feedback'
         )),
         commands.registerCommand('clusters.openshift.useProject', (context) =>
             commands.executeCommand('extension.vsKubernetesUseNamespace', context),

src/feedback.ts

@@ -0,0 +1,15 @@
+/*-----------------------------------------------------------------------------------------------
+ *  Copyright (c) Red Hat, Inc. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE file in the project root for license information.
+ *-----------------------------------------------------------------------------------------------*/
+import { vsCommand } from './vscommand';
+import FeedbackLoader from './webview/feedback/feedbackLoader';
+
+export class Feedback {
+
+    @vsCommand('openshift.show.feedback')
+    static async openFeedbackWindow(): Promise<void> {
+        await FeedbackLoader.loadView('Feedback');
+    }
+
+}

src/webview/feedback/app/feedback.css

@@ -0,0 +1,70 @@
+.parentContainer {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--vscode-editor-background) !important;
+    color: var(--vscode-editor-foreground) !important;
+    font-family: var(--vscode-editor-font-family) !important;
+    font-size: var(--vscode-editor-font-size) !important;
+    font-weight: var(--vscode-editor-font-weight) !important;
+}
+
+.header__logo {
+    margin-top: 1rem;
+    margin-left: 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    gap: 3px;
+}
+
+.image__logo {
+    height: 48px;
+    width: 54px;
+    object-fit: contain;
+}
+
+.highlight {
+    color: #EE0000;
+    display: inline;
+}
+
+.foreGroundColor {
+    color: var(--vscode-foreground);
+    font-weight: normal;
+}
+
+.headerContainer {
+    display: flex;
+    flex-direction: row;
+    border-bottom: 3px solid #EE0000;
+}
+
+.captionHeader {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    justify-content: center;
+    margin: auto;
+    margin-top: 1rem;
+    word-spacing: 2px;
+}
+
+.section__header-hint {
+    width: 550px;
+    justify-content: center;
+    word-spacing: 5px;
+    text-align: justify;
+    color: var(--vscode-foreground);
+    font-weight: normal;
+    font-family: var(--vscode-font-family);
+    font-size: 14px;
+}
+
+.section__footer {
+    width: fit-content;
+    word-spacing: 0px;
+}
+
+.footerText:hover {
+    border-bottom: 3px solid #EE0000 !important;
+}

src/webview/feedback/app/feedback.tsx

@@ -0,0 +1,85 @@
+/*-----------------------------------------------------------------------------------------------
+ *  Copyright (c) Red Hat, Inc. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE file in the project root for license information.
+ *-----------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { Icon, Stack, Typography } from '@mui/material';
+import { Model } from 'survey-core';
+import { Survey } from 'survey-react-ui';
+import { DefaultProps } from '../../common/propertyTypes';
+import { json } from '../json';
+import { VSCodeMessage } from './vsCodeMessage';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import OpenShiftExtensionIcon from '../../../../images/openshift_icon.png';
+import MicrosoftIcon from '../../../../images/welcome/microsoft.svg';
+import 'survey-core/defaultV2.css';
+import './feedback.css'
+
+export const FeedbackComponent: React.FC<DefaultProps> = ({ }) => {
+
+    const feedbackModal = new Model(json);
+
+    feedbackModal.onComplete.add((sender, options) => {
+        options.showSaveInProgress();
+        VSCodeMessage.postMessage({
+            action: 'postFeedback',
+            data: sender.data
+        });
+        options.showSaveSuccess();
+    });
+
+    feedbackModal.onValueChanged.add((sender, _options) => {
+        if (Object.keys(sender.getAllValues()).length > 0) {
+            sender.showNavigationButtons = true;
+        } else {
+            sender.showNavigationButtons = false;
+        }
+    });
+
+    feedbackModal.completeText = 'Submit';
+    feedbackModal.showNavigationButtons = false;
+
+    return (
+        <div className='parentContainer'>
+            <div className='headerContainer'>
+                <header className='header__logo' style={{ width: '50%' }}>
+                    <img className='image__logo' src={OpenShiftExtensionIcon} />
+                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                        <label style={{ display: 'flex', flexDirection: 'row', textAlign: 'center' }}>
+                            <Typography variant='h4' className='highlight'>OpenShift</Typography>
+                            <Typography variant='h4' style={{ paddingLeft: '1rem' }} className='foreGroundColor'>Toolkit</Typography>
+                        </label>
+                        <Typography variant='h6' style={{ marginTop: '2px' }} className='foreGroundColor'>Your opinion matters to us!</Typography>
+                    </div>
+                </header>
+                <div style={{ width: '50%' }}>
+                    <label style={{ display: 'flex', flexDirection: 'row', gap: '1rem', textAlign: 'center', float: 'right', margin: '1rem' }}>
+                        <a href='https://github.com/redhat-developer/vscode-openshift-tools/issues'>
+                            <div className='section__header-hint section__footer'>
+                                <Stack direction='row' alignItems='center' gap={1}>
+                                    <GitHubIcon style={{ fontSize: 25 }} />
+                                    <Typography variant='body2' className='footerText'>Contact us on GitHub</Typography>
+                                </Stack>
+                            </div>
+                        </a>
+                        <a href='https://marketplace.visualstudio.com/items?itemName=redhat.vscode-openshift-connector&ssr=false#review-details'>
+                            <div className='section__header-hint section__footer'>
+                                <Stack direction='row' alignItems='center' gap={1}>
+                                    <Icon fontSize='small'>
+                                        <img src={MicrosoftIcon} />
+                                    </Icon>
+                                    <Typography variant='body2' className='footerText'>Rate us on Marketplace</Typography>
+                                </Stack>
+                            </div>
+                        </a>
+                    </label>
+                </div>
+            </div>
+            <div className='captionHeader'>
+                <Typography variant='subtitle2' className='foreGroundColor'>The Red Hat OpenShift Toolkit extension team would like to learn from your experience to improve the extension workflow.</Typography>
+                <Typography variant='subtitle2' className='foreGroundColor'>This survey will take about 3 minutes. Your feedback is extremely valuable and will directly impact the product moving forward.</Typography>
+            </div>
+            <Survey model={feedbackModal} />
+        </div>
+    );
+}

src/webview/feedback/app/index.css

@@ -0,0 +1,83 @@
+.sd-root-modern,
+.sd-container-modern,
+.sd-title.sd-container-modern__title {
+    background-color: var(--vscode-editor-background) !important;
+    color: var(--vscode-editor-foreground) !important;
+    font-family: var(--vscode-editor-font-family) !important;
+    font-size: var(--vscode-editor-font-size) !important;
+    font-weight: var(--vscode-editor-font-weight) !important;
+}
+
+.sd-header__text .sd-title {
+    color: #EE0000 !important;
+}
+
+.sd-title.sd-container-modern__title {
+    box-shadow: 0px 2px 0px var(--sjs-primary-backcolor, #ee0000) !important;
+}
+
+.sd-progress,
+.sd-progress__bar {
+    background-color: var(--sjs-border-light, var(--border-light, #EE0000)) !important;
+}
+
+.sd-rating__item:focus-within {
+    border-color: var(--sjs-primary-backcolor, var(--primary, #EE0000)) !important;
+
+}
+
+.sd-rating__item--selected {
+    background-color: var(--sjs-primary-backcolor, var(--primary, #EE0000)) !important;
+    border-color: var(--sjs-primary-backcolor, var(--primary, #EE0000)) !important;
+}
+
+.sd-boolean__control:focus~.sd-boolean__switch {
+    box-shadow: inset 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #fff)) !important;
+}
+
+.sd-boolean__thumb,
+.sd-btn {
+    color: var(--sjs-primary-backcolor, var(--primary, #EE0000)) !important;
+}
+
+.sd-btn--action {
+    background-color: var(--sjs-primary-backcolor, var(--primary, #EE0000)) !important;
+    color: var(--sjs-primary-backcolor, var(--primary, var(--vscode-button-foreground))) !important;
+}
+
+.sv-logo--left {
+    width: 5rem !important;
+}
+
+.sd-description {
+    color: var(--vscode-descriptionForeground) !important;
+}
+
+.sd-element__title span {
+    background-color: var(--vscode-editor-background) !important;
+    color: var(--vscode-editor-foreground) !important;
+    font-weight: var(--vscode-editor-font-weight) !important;
+}
+
+.svc-logic-question-value,
+.sd-element--with-frame {
+    background-color: transparent !important;
+}
+
+.sd-rating__item-text.sd-rating__item-text {
+    border: none !important;
+}
+
+.sd-rating__item-smiley {
+    background-color: #ffd700 !important;
+    fill: black !important;
+}
+
+a:link {
+    text-decoration: none !important;
+}
+
+a:focus {
+    box-shadow: none !important;
+    outline: 0 !important;
+}