added circular progress (#2885)

Signed-off-by: msivasubramaniaan <[email protected]>

Author: msivasubramaniaan

src/webview/common/loading.tsx

@@ -2,34 +2,40 @@
  *  Copyright (c) Red Hat, Inc. All rights reserved.
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
-import { Box, Typography } from '@mui/material';
+import { Box, CircularProgress, Typography } from '@mui/material';
 import LinearProgress from '@mui/material/LinearProgress';
 import { makeStyles } from '@mui/styles';
 import * as React from 'react';
 import loaderStyle from './loading.style';
 
 interface LoadProps extends React.AllHTMLAttributes<HTMLDivElement> {
-    title: string
+    title: string,
+    type?: string
 }
 
 const useLoadingStyle = makeStyles(loaderStyle);
 
 export const LoadScreen: React.FC<LoadProps> = ({
-    title
+    title,
+    type
 }: LoadProps) => {
     const loadingStyle = useLoadingStyle();
+    const isCircular = type && type === 'circle';
     const isInstall = title.indexOf('Install') !== -1;
     return (
-        <div className={isInstall ? '' : loadingStyle.loading}>
-            <div style={{ width : isInstall ? 'auto' : '30rem' }}>
+        <div className={isInstall ? '' : loadingStyle.loading} style={{ float: 'right', marginRight: '0.5rem' }}>
+            <div style={{ width: isInstall ? 'auto' : '30rem', display: 'flex', flexDirection: isCircular ? 'row' : 'column' }}>
                 <Box sx={{ color: '#EE0000' }}>
-                    <LinearProgress color='inherit' sx={{ height: isInstall ? '0.5rem' : '1rem' }} />
+                    {type && type === 'circle' ?
+                        <CircularProgress color='inherit' size={20} /> :
+                        <LinearProgress color='inherit' sx={{ height: isInstall ? '0.5rem' : '1rem' }} />
+                    }
                 </Box>
                 <Typography
                     variant='caption'
                     component='div'
                     color='inherit'
-                    style={{ marginTop: '0.5rem', fontSize: '1.25em' }}
+                    style={{ marginTop: isCircular ? '3px' : '0.5rem', marginLeft: isCircular ? '5px' : '0', fontSize: '1em' }}
                 >{title}</Typography>
             </div>
         </div>

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

@@ -3,14 +3,15 @@
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
 import { Autocomplete, Badge, Button, Card, InputLabel, Modal, TextField, ThemeProvider, Typography, darken, lighten, styled } from '@mui/material';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import React from 'react';
 import clsx from 'clsx';
 import { CardTheme } from '../../common/cardItem.style';
 import '../app/cardItem.scss';
-import { LoadScreen } from '../../common/loading';
 import { Chart } from '../helmChartType';
 import { VSCodeMessage } from '../vsCodeMessage';
 import { DevFileProps } from './wrapperCardItem';
+import { LoadScreen } from '../../common/loading';
 
 export class CardItem extends React.Component<DevFileProps, {
     displayName: string,
@@ -21,6 +22,7 @@ export class CardItem extends React.Component<DevFileProps, {
         loadScreen: boolean,
         error: boolean,
         errorMsg: string,
+        installed?: boolean
     }
 }> {
 
@@ -98,12 +100,11 @@ export class CardItem extends React.Component<DevFileProps, {
                     installResponse: {
                         loadScreen: message.data.show,
                         error: message.data.isError,
-                        errorMsg: message.data.error || ''
+                        errorMsg: message.data.error || '',
+                        installed: message.data.isInstalled
                     }
                 });
-                if (message.data.isError === false) {
-                    this.onCloseClick(undefined, 'backdropClick');
-                } else if (message.data.isError) {
+                if (message.data.isError) {
                     this.props.helmEntry.isExpand = message.data.chartName === this.state.selectedVersion.name ? true : false;
                 }
             }
@@ -318,28 +319,32 @@ export class CardItem extends React.Component<DevFileProps, {
                                     </Typography>
                                 </div>
                             </div>
-                            <div style={{ width: '50%' }}>
-                                <Button
-                                    disabled={this.handleDisable()}
-                                    variant='outlined'
-                                    className={this.props.cardItemStyle.helmInstallBtn}
-                                    onClick={this.clickInstall}
-                                    style={{ float: 'right', backgroundColor: this.handleDisable() ? 'var(--vscode-button-secondaryBackground)' : '#EE0000', textTransform: 'none', color: this.props.themeKind <= 1 ? 'black' : 'white' }}>
-                                    <Typography variant='body2'>
-                                        Install
-                                    </Typography>
-                                </Button>
+                            <div style={{ width: '50%', display: 'flex', flexDirection: 'row' }}>
+                                <div style={{ width: '85%'}}>
+                                    {
+                                        installResponse.loadScreen && <LoadScreen title='Installation in Progress' type='circle' />
+                                    }
+                                </div>
+                                <div style={{float: 'right'}}>
+                                    <Button
+                                        disabled={this.handleDisable() || installResponse.installed}
+                                        variant='outlined'
+                                        className={this.props.cardItemStyle.helmInstallBtn}
+                                        onClick={this.clickInstall}
+                                        style={{ float: 'right', backgroundColor: this.handleDisable() || installResponse.installed ? 'var(--vscode-button-secondaryBackground)' : '#EE0000', textTransform: 'none', color: this.props.themeKind <= 1 ? 'black' : 'white' }}
+                                        startIcon={installResponse.installed ? <CheckCircleOutlineIcon /> : undefined}>
+                                        <Typography variant='body2'>
+                                            {!installResponse.installed ? 'Install' : 'Installed'}
+                                        </Typography>
+                                    </Button>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
                 {
                     versionCard
                 }
-                {
-                    installResponse.loadScreen ?
-                        <LoadScreen title='Installing the Chart' /> : undefined
-                }
             </Card>
         </Modal>;
 

src/webview/helm-chart/helmChartLoader.ts

@@ -41,7 +41,8 @@ export class HelmCommand {
             panel.webview.postMessage({
                 action: 'loadScreen',
                 show: false,
-                isError: false
+                isError: false,
+                isInstalled: true
             });
         } catch (e) {
             panel.webview.postMessage({