|
| 1 | +/*----------------------------------------------------------------------------------------------- |
| 2 | + * Copyright (c) Red Hat, Inc. All rights reserved. |
| 3 | + * Licensed under the MIT License. See LICENSE file in the project root for license information. |
| 4 | + *-----------------------------------------------------------------------------------------------*/ |
| 5 | +import React from 'react'; |
| 6 | +import { Icon, Stack, Typography } from '@mui/material'; |
| 7 | +import { Model } from 'survey-core'; |
| 8 | +import { Survey } from 'survey-react-ui'; |
| 9 | +import { DefaultProps } from '../../common/propertyTypes'; |
| 10 | +import { json } from '../json'; |
| 11 | +import { VSCodeMessage } from './vsCodeMessage'; |
| 12 | +import GitHubIcon from '@mui/icons-material/GitHub'; |
| 13 | +import OpenShiftExtensionIcon from '../../../../images/openshift_icon.png'; |
| 14 | +import MicrosoftIcon from '../../../../images/welcome/microsoft.svg'; |
| 15 | +import 'survey-core/defaultV2.css'; |
| 16 | +import './feedback.css' |
| 17 | + |
| 18 | +export const FeedbackComponent: React.FC<DefaultProps> = ({ }) => { |
| 19 | + |
| 20 | + const feedbackModal = new Model(json); |
| 21 | + |
| 22 | + feedbackModal.onComplete.add((sender, options) => { |
| 23 | + options.showSaveInProgress(); |
| 24 | + VSCodeMessage.postMessage({ |
| 25 | + action: 'postFeedback', |
| 26 | + data: sender.data |
| 27 | + }); |
| 28 | + options.showSaveSuccess(); |
| 29 | + }); |
| 30 | + |
| 31 | + feedbackModal.onValueChanged.add((sender, _options) => { |
| 32 | + if (Object.keys(sender.getAllValues()).length > 0) { |
| 33 | + sender.showNavigationButtons = true; |
| 34 | + } else { |
| 35 | + sender.showNavigationButtons = false; |
| 36 | + } |
| 37 | + }); |
| 38 | + |
| 39 | + feedbackModal.completeText = 'Submit'; |
| 40 | + feedbackModal.showNavigationButtons = false; |
| 41 | + |
| 42 | + return ( |
| 43 | + <div className='parentContainer'> |
| 44 | + <div className='headerContainer'> |
| 45 | + <header className='header__logo' style={{ width: '50%' }}> |
| 46 | + <img className='image__logo' src={OpenShiftExtensionIcon} /> |
| 47 | + <div style={{ display: 'flex', flexDirection: 'column' }}> |
| 48 | + <label style={{ display: 'flex', flexDirection: 'row', textAlign: 'center' }}> |
| 49 | + <Typography variant='h4' className='highlight'>OpenShift</Typography> |
| 50 | + <Typography variant='h4' style={{ paddingLeft: '1rem' }} className='foreGroundColor'>Toolkit</Typography> |
| 51 | + </label> |
| 52 | + <Typography variant='h6' style={{ marginTop: '2px' }} className='foreGroundColor'>Your opinion matters to us!</Typography> |
| 53 | + </div> |
| 54 | + </header> |
| 55 | + <div style={{ width: '50%' }}> |
| 56 | + <label style={{ display: 'flex', flexDirection: 'row', gap: '1rem', textAlign: 'center', float: 'right', margin: '1rem' }}> |
| 57 | + <a href='https://github.com/redhat-developer/vscode-openshift-tools/issues'> |
| 58 | + <div className='section__header-hint section__footer'> |
| 59 | + <Stack direction='row' alignItems='center' gap={1}> |
| 60 | + <GitHubIcon style={{ fontSize: 25 }} /> |
| 61 | + <Typography variant='body2' className='footerText'>Contact us on GitHub</Typography> |
| 62 | + </Stack> |
| 63 | + </div> |
| 64 | + </a> |
| 65 | + <a href='https://marketplace.visualstudio.com/items?itemName=redhat.vscode-openshift-connector&ssr=false#review-details'> |
| 66 | + <div className='section__header-hint section__footer'> |
| 67 | + <Stack direction='row' alignItems='center' gap={1}> |
| 68 | + <Icon sx={{ |
| 69 | + fontSize: 23 |
| 70 | + }}> |
| 71 | + <img src={MicrosoftIcon} /> |
| 72 | + </Icon> |
| 73 | + <Typography variant='body2' className='footerText'>Rate us on Marketplace</Typography> |
| 74 | + </Stack> |
| 75 | + </div> |
| 76 | + </a> |
| 77 | + </label> |
| 78 | + </div> |
| 79 | + </div> |
| 80 | + <div className='captionHeader'> |
| 81 | + <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> |
| 82 | + <Typography variant='subtitle2' className='foreGroundColor'>This survey will take about 2 minutes. Your feedback is extremely valuable and will directly impact the product moving forward.</Typography> |
| 83 | + </div> |
| 84 | + <Survey model={feedbackModal} /> |
| 85 | + </div> |
| 86 | + ); |
| 87 | +} |
0 commit comments