added yaml editor for helm values

package.json

@@ -71,9 +71,13 @@
 		"public-ui-test": "extest setup-and-run out/test/ui/public-ui-test.js -o test/ui/settings.json -m test/ui/.mocharc.js -e ./test-resources/extensions -c max -i"
 	},
 	"dependencies": {
+		"@codemirror/lang-yaml": "^6.1.1",
 		"@kubernetes/client-node": "^0.21.0",
 		"@redhat-developer/vscode-redhat-telemetry": "^0.8.0",
+		"@uiw/codemirror-theme-github": "^4.23.0",
+		"@uiw/react-codemirror": "^4.23.0",
 		"clsx": "^2.1.1",
+		"codemirror": "^6.0.1",
 		"dockerode": "^4.0.2",
 		"fs-extra": "^11.2.0",
 		"git-up": "^7.0.0",

src/helm/helm.ts

@@ -75,10 +75,11 @@ export async function installHelmChart(
     repoName: string,
     chartName: string,
     version: string,
+    yamlFilePath: string
 ): Promise<CliExitData> {
     await syncHelmRepo(repoName);
     return await CliChannel.getInstance().executeTool(
-        HelmCommands.installHelmChart(name, repoName, chartName, version)
+        HelmCommands.installHelmChart(name, repoName, chartName, version, yamlFilePath)
     );
 }
 
@@ -141,3 +142,9 @@ export async function helmSyntaxVersion(): Promise<HelmSyntaxVersion> {
     }
     return cachedVersion;
 }
+
+export async function getYAMLValues(repoName: string, chartName: string) {
+    return await CliChannel.getInstance().executeTool(
+        HelmCommands.getYAMLValues(repoName, chartName), undefined, false
+    );
+}

src/helm/helmCommands.ts

@@ -3,6 +3,7 @@
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
 
+import validator from 'validator';
 import { CommandOption, CommandText } from '../base/command';
 
 export function addHelmRepo(repoName: string, url: string): CommandText {
@@ -23,8 +24,13 @@ export function getRepos(): CommandText {
     return commandText;
 }
 
-export function installHelmChart(name: string, repoName: string, chartName: string, version: string): CommandText {
-    return new CommandText('helm', `install ${name} ${repoName}/${chartName}`, [new CommandOption('--version', version)]);
+export function installHelmChart(name: string, repoName: string, chartName: string, version: string, yamlFilePath: string): CommandText {
+    const commandText = new CommandText('helm', `install ${name} ${repoName}/${chartName}`)
+    commandText.addOption(new CommandOption('--version', version));
+    if(yamlFilePath && !validator.isEmpty(yamlFilePath)) {
+        commandText.addOption(new CommandOption('-f', yamlFilePath));
+    }
+    return commandText;
 }
 
 export function unInstallHelmChart(name: string): CommandText {
@@ -34,3 +40,7 @@ export function unInstallHelmChart(name: string): CommandText {
 export function listHelmReleases(): CommandText {
     return new CommandText('helm', 'list', [new CommandOption('-o', 'json')]);
 }
+
+export function getYAMLValues(repoName: string, chartName: string): CommandText {
+    return new CommandText('helm', `show values ${repoName}/${chartName}`);
+}

src/webview/helm-chart/app/helmModal.tsx

@@ -6,11 +6,15 @@
 import { Close } from '@mui/icons-material';
 import InstallDesktopIcon from '@mui/icons-material/InstallDesktop';
 import LoadingButton from '@mui/lab/LoadingButton';
-import { Alert, FormControl, FormHelperText, IconButton, InputLabel, MenuItem, Paper, Select, Stack, TextField, useMediaQuery } from '@mui/material';
+import { Alert, Box, FormControl, FormHelperText, IconButton, InputLabel, LinearProgress, MenuItem, Paper, Select, Stack, TextField, Theme, Typography, useMediaQuery } from '@mui/material';
 import React from 'react';
 import { Chart, ChartResponse } from '../../../helm/helmChartType';
 import { VSCodeMessage } from '../vsCodeMessage';
 import { HelmListItem } from './helmListItem';
+import CodeMirror from '@uiw/react-codemirror';
+import { yaml } from '@codemirror/lang-yaml';
+import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
+import jsyaml from 'js-yaml';
 
 type Message = {
     action: string;
@@ -22,6 +26,7 @@ export const HelmModal = React.forwardRef(
         props: {
             helmChart: ChartResponse;
             closeModal: () => void;
+            theme: Theme;
         },
         ref,
     ) => {
@@ -31,14 +36,15 @@ export const HelmModal = React.forwardRef(
         const [installNameErrorMessage, setInstallNameErrorMessage] = React.useState(
             'Please enter a name.',
         );
-
         const [showStatus, setStatus] = React.useState<boolean>(false);
         const [installError, setInstallError] = React.useState<boolean>(false);
         const [installMsg, setInstallMsg] = React.useState<string>('');
         const [installLoading, setInstallLoading] = React.useState<boolean>(false);
 
         const [selectedVersion, setSelectedVersion] = React.useState<Chart>(props.helmChart.chartVersions[0]);
         const [isInteracted, setInteracted] = React.useState(false);
+        const [yamlValues, setYAMLValues] = React.useState<string>('');
+        const [yamlError, setYAMLError] = React.useState<string>(undefined);
 
         function respondToMessage(messageEvent: MessageEvent) {
             const message = messageEvent.data as Message;
@@ -63,6 +69,10 @@ export const HelmModal = React.forwardRef(
                     }
                     break;
                 }
+                case 'getYAMLValues': {
+                    setYAMLValues(message.data.yamlValues)
+                    break;
+                }
                 default:
                     break;
             }
@@ -75,6 +85,10 @@ export const HelmModal = React.forwardRef(
             };
         }, []);
 
+        React.useEffect(() => {
+            VSCodeMessage.postMessage({ action: 'getYAMLValues', data: props.helmChart });
+        }, []);
+
         const isWideEnough = useMediaQuery('(min-width: 900px)');
 
         React.useEffect(() => {
@@ -101,6 +115,16 @@ export const HelmModal = React.forwardRef(
 
         const isError = !versions.length || !selectedVersion;
 
+        const handleChange = (newValue: string) => {
+            setYAMLError(undefined);
+            try {
+                jsyaml.load(newValue);
+                setYAMLValues(newValue);
+            } catch(e) {
+                setYAMLError(e.message);
+            }
+        };
+
         return (
             <Paper
                 elevation={24}
@@ -109,12 +133,12 @@ export const HelmModal = React.forwardRef(
                     top: '50%',
                     left: '50%',
                     width: isWideEnough ? '900px' : 'calc(100vw - 48px)',
-                    maxHeight: 'calc(100vh - 48px)',
+                    height: 'auto',
                     transform: 'translate(-50%, -50%)',
                     padding: 2,
                 }}
             >
-                <Stack direction='column' spacing={2}>
+                <Stack direction='column' spacing={1} justifyContent='space-between'>
                     <Stack
                         direction='row'
                         justifyContent='space-between'
@@ -170,33 +194,66 @@ export const HelmModal = React.forwardRef(
                                 );
                             })}
                         </Select>
-                        <Stack direction='row' justifyContent='space-between'>
-                            <FormHelperText error={isError}>{helperText}</FormHelperText>
-                            <Stack direction='row' marginTop={1} spacing={2}>
-                                <LoadingButton
-                                    variant='contained'
-                                    onClick={() => {
-                                        setInstallLoading(true);
-                                        VSCodeMessage.postMessage({
-                                            action: 'install',
-                                            data: {
-                                                name: installName,
-                                                repoName: props.helmChart.repoName,
-                                                chartName: props.helmChart.chartName,
-                                                version: selectedVersion.version
-                                            }
-                                        })
-                                    }}
-                                    disabled={!isInstallNameFieldValid || installName.length === 0}
-                                    loading={installLoading}
-                                    loadingPosition='start'
-                                    startIcon={<InstallDesktopIcon />}
-                                >
-                                    <span>Install</span>
-                                </LoadingButton>
-                            </Stack>
-                        </Stack>
+                        <FormHelperText error={isError}>{helperText}</FormHelperText>
                     </FormControl>
+                    {
+                        yamlValues.length <= 0 ?
+                            <>
+                                <Box sx={{ color: '#EE0000' }}>
+                                    <LinearProgress color='inherit' sx={{ height: '1rem' }} />
+                                </Box>
+                                <Typography
+                                    variant='caption'
+                                    component='div'
+                                    color='inherit'
+                                    style={{ marginTop: '3px', marginLeft: '5px', fontSize: '1em' }}
+                                >Retrieving helm values</Typography>
+                            </>
+                            :
+                            <>
+                                {
+                                    yamlValues !== 'noVal' &&
+                                    <Stack direction='column' spacing={1} justifyContent='space-between'>
+                                        <InputLabel id='values'>Values:</InputLabel>
+                                        <CodeMirror
+                                            value={yamlValues}
+                                            height='300px'
+                                            extensions={[yaml()]}
+                                            theme={props.theme?.palette.mode === 'light' ? githubLight : githubDark}
+                                            onChange={handleChange}
+                                            basicSetup={{
+                                                lineNumbers: true,
+                                                highlightActiveLine: true
+                                            }} />
+                                        {yamlError && <div style={{ color: '#EE0000' }}>Error: {yamlError}</div>}
+                                    </Stack>
+                                }
+                            </>
+                    }
+                    <Stack direction='row' marginTop={1} spacing={2}>
+                        <LoadingButton
+                            variant='contained'
+                            onClick={() => {
+                                setInstallLoading(true);
+                                VSCodeMessage.postMessage({
+                                    action: 'install',
+                                    data: {
+                                        name: installName,
+                                        repoName: props.helmChart.repoName,
+                                        chartName: props.helmChart.chartName,
+                                        version: selectedVersion.version,
+                                        yamlValues
+                                    }
+                                });
+                            }}
+                            disabled={!isInstallNameFieldValid || installName.length === 0}
+                            loading={installLoading}
+                            loadingPosition='start'
+                            startIcon={<InstallDesktopIcon />}
+                        >
+                            <span>Install</span>
+                        </LoadingButton>
+                    </Stack>
                     {showStatus && (
                         !installError ? < Alert severity='info'>
                             {installMsg} `{installName}`

src/webview/helm-chart/app/helmSearch.tsx

@@ -4,7 +4,7 @@
  *-----------------------------------------------------------------------------------------------*/
 
 import React from 'react';
-import { Alert, Checkbox, Divider, FormControlLabel, FormGroup, IconButton, InputAdornment, Modal, Pagination, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import { Alert, Checkbox, Divider, FormControlLabel, FormGroup, IconButton, InputAdornment, Modal, Pagination, Stack, TextField, Theme, Tooltip, Typography } from '@mui/material';
 import { Close, Search } from '@mui/icons-material';
 import { HelmListItem } from './helmListItem';
 import { ChartResponse, HelmRepo } from '../../../helm/helmChartType';
@@ -161,7 +161,11 @@ function SearchBar(props: {
     );
 }
 
-export function HelmSearch() {
+type HelmSearchProps = {
+    theme: Theme;
+};
+
+export function HelmSearch(props: HelmSearchProps) {
     const ITEMS_PER_PAGE = 18;
     const [isSomeHelmChartsRetrieved, setSomeHelmChartsRetrieved] = React.useState(false);
     const [helmRepos, setHelmRepos] = React.useState<HelmRepo[]>([]);
@@ -374,6 +378,7 @@ export function HelmSearch() {
                     closeModal={() => {
                         setselectedHelmChart((_) => undefined);
                     }}
+                    theme={props.theme}
                 />
             </Modal>
         </>

src/webview/helm-chart/app/home.tsx

@@ -38,7 +38,7 @@ export const Home = () => {
     return (
         <ThemeProvider theme={theme}>
             <Container maxWidth='lg' sx={{ height: '100%', paddingTop: '1em', paddingBottom: '1em'}}>
-                <HelmSearch />
+                <HelmSearch theme={theme}/>
             </Container>
         </ThemeProvider>
     );

src/webview/helm-chart/helmChartLoader.ts

@@ -5,6 +5,8 @@
 import * as JSYAML from 'js-yaml';
 import * as path from 'path';
 import * as vscode from 'vscode';
+import * as fs from 'fs';
+import * as tmp from 'tmp';
 import { OpenShiftExplorer } from '../../explorer';
 import * as Helm from '../../helm/helm';
 import { Chart, ChartResponse, HelmRepo } from '../../helm/helmChartType';
@@ -14,6 +16,7 @@ import { Progress } from '../../util/progress';
 import { vsCommand } from '../../vscommand';
 import { validateName } from '../common-ext/createComponentHelpers';
 import { loadWebviewHtml } from '../common-ext/utils';
+import { promisify } from 'util';
 
 let panel: vscode.WebviewPanel;
 const helmCharts: ChartResponse[] = [];
@@ -38,8 +41,14 @@ export class HelmCommand {
                 message: 'Installing'
             }
         });
+
+        //write temp yaml file for values
+        const tmpFolder = vscode.Uri.parse(await promisify(tmp.dir)());
+        const tempFilePath = path.join(tmpFolder.fsPath, `helmValues-${Date.now()}.yaml`);
+        fs.writeFileSync(tempFilePath, event.data.yamlValues, 'utf8');
+
         void Progress.execFunctionWithProgress(`Installing the chart ${event.data.name}`, async () => {
-            await Helm.installHelmChart(event.data.name, event.data.repoName, event.data.chartName, event.data.version);
+            await Helm.installHelmChart(event.data.name, event.data.repoName, event.data.chartName, event.data.version, tempFilePath);
         }).then(() => {
             void panel.webview.postMessage({
                 action: 'installStatus',
@@ -59,6 +68,8 @@ export class HelmCommand {
                     message: message.substring(message.indexOf('INSTALLATION FAILED:') + 'INSTALLATION FAILED:'.length)
                 }
             });
+        }).finally(() => {
+            fs.rm(tmpFolder.fsPath, { force: true, recursive: true }, undefined);
         });
     }
 
@@ -70,7 +81,7 @@ export class HelmCommand {
     }
 }
 
-function helmChartMessageListener(event: any): void {
+async function helmChartMessageListener(event: any): Promise<void> {
     switch (event?.action) {
         case 'init':
             void panel.webview.postMessage({
@@ -95,6 +106,19 @@ function helmChartMessageListener(event: any): void {
             });
             break;
         }
+        case 'getYAMLValues': {
+            const yamlValues = await Helm.getYAMLValues(event.data.repoName as string, event.data.chartName as string);
+            if (yamlValues) {
+                void panel.webview.postMessage({
+                    action: 'getYAMLValues',
+                    data: {
+                        helmChart: event.data,
+                        yamlValues: yamlValues.stdout.length > 0 ? yamlValues.stdout : 'noVal'
+                    },
+                });
+            }
+            break;
+        }
         case 'getProviderTypes': {
             const types: string[] = [];
             helmCharts.map((helm: ChartResponse) => {

test/integration/helm.test.ts

@@ -55,7 +55,7 @@ suite('helm integration', function () {
     });
 
     test('installs a chart as a release', async function () {
-        await Helm.installHelmChart(RELEASE_NAME, REPO_NAME, CHART_NAME, CHART_VERSION);
+        await Helm.installHelmChart(RELEASE_NAME, REPO_NAME, CHART_NAME, CHART_VERSION, undefined);
         const releases = await Helm.getHelmReleases();
         const sampleChartRelease = releases.find((release) => release.name === RELEASE_NAME);
         expect(sampleChartRelease).to.exist;