fix ui changes in helm chart view (#2874)

* fix ui changes in helm chart view

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

Author: msivasubramaniaan

package.json

@@ -406,6 +406,16 @@
 				"title": "Open Helm Charts",
 				"category": "OpenShift"
 			},
+			{
+				"command": "openshift.componentTypesView.registry.helmChart.install",
+				"title": "Open Helm Charts",
+				"category": "OpenShift"
+			},
+			{
+				"command": "openshift.componentTypesView.registry.helmChart.open",
+				"title": "Open Helm Charts",
+				"category": "OpenShift"
+			},
 			{
 				"command": "openshift.project.delete",
 				"title": "Delete",
@@ -1046,6 +1056,14 @@
 					"command": "openshift.componentTypesView.registry.openHelmChartsInView",
 					"when": "false"
 				},
+				{
+					"command": "openshift.componentTypesView.registry.helmChart.install",
+					"when": "false"
+				},
+				{
+					"command": "openshift.componentTypesView.registry.helmChart.open",
+					"when": "false"
+				},
 				{
 					"command": "openshift.componentTypesView.registry.openInBrowser",
 					"when": "false"

src/webview/common/cardItem.style.tsx

@@ -43,9 +43,9 @@ export default (_theme: Theme) =>
             zIndex: 1
         },
         helmHomeCard: {
-            height: '20rem',
-            width: '15rem',
-            margin: '1rem'
+            height: '13rem',
+            width: '11rem',
+            margin: '0.5rem'
         },
         cardHeader: {
             display: 'block',
@@ -123,12 +123,13 @@ export default (_theme: Theme) =>
             WebkitBoxOrient: 'vertical'
         },
         detailedDescription: {
-            width: '45rem',
+            width: '28rem',
             wordWrap: 'break-word',
             display: '-webkit-box',
             WebkitLineClamp: 20,
             WebkitBoxOrient: 'vertical',
-            textAlign: 'left'
+            textAlign: 'justify',
+            margin: '1rem 0.5rem 0 1rem'
         },
         helmCard: {
             color: 'var(--vscode-foreground) !important',
@@ -137,10 +138,9 @@ export default (_theme: Theme) =>
             fontFamily: 'var(--vscode-font-family)',
             border: '1px solid',
             borderColor: 'inherit',
-            height: '37rem',
-            width: '50rem',
+            height: 'auto',
+            width: '64rem',
             margin: 'auto',
-            overflowY: 'auto',
             display: 'flex',
             flexDirection: 'column'
         },
@@ -152,20 +152,52 @@ export default (_theme: Theme) =>
             display: 'flex',
             flexDirection: 'column'
         },
+        helmHeaderProvider: {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '0.5rem',
+            width: '15rem'
+        },
         helmCardBody: {
             position: 'relative',
             width: '100%',
-            height: '50rem',
-            margin: '1rem',
+            height: '20rem',
             display: 'flex',
+            overflowY: 'auto',
             flexDirection: 'column',
             gap: '1rem'
         },
+        helmInputBox: {
+            margin: '1rem !important',
+            border: '0.5px solid !important'
+        },
         helmCardDetails: {
             display: 'flex',
             flexDirection: 'row',
-            gap: '0.5rem',
-            marginRight: '1rem'
+            gap: '0.5rem'
+        },
+        helmCardDetailItemValue: {
+            margin: '0.5rem 0 !important'
+        },
+        helmCardDetailItem: {
+            width: 'fit-content',
+            color: 'var(--vscode-settings-textInputForeground)'
+        },
+        helmInstallBtn: {
+            textAlign: 'center',
+            overflow: 'hidden',
+            '&:hover': {
+                cursor: 'pointer',
+                backgroundColor: '#BE0000 !important'
+            },
+            textTransform: 'none',
+            width: 'auto',
+            height: '2rem',
+            outline: '0.0625rem solid transparent',
+            outlineOffset: '0.125rem!important',
+            fontSize: 'var(--vscode-font-size) !important',
+            fontFamily: 'var(--vscode-font-family) !important',
+            justifyContent: 'space-between !important'
         },
         yamlCard: {
             color: 'var(--vscode-foreground) !important',

src/webview/common/loading.tsx

@@ -21,7 +21,7 @@ export const LoadScreen: React.FC<LoadProps> = ({
     const isInstall = title.indexOf('Install') !== -1;
     return (
         <div className={isInstall ? '' : loadingStyle.loading}>
-            <div style={{ width : isInstall ? '48rem' : '30rem' }}>
+            <div style={{ width : isInstall ? 'auto' : '30rem' }}>
                 <Box sx={{ color: '#EE0000' }}>
                     <LinearProgress color='inherit' sx={{ height: isInstall ? '0.5rem' : '1rem' }} />
                 </Box>

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

@@ -0,0 +1,28 @@
+/*-----------------------------------------------------------------------------------------------
+ *  Copyright (c) Red Hat, Inc. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE file in the project root for license information.
+ *-----------------------------------------------------------------------------------------------*/
+
+.MuiAutocomplete-inputRoot {
+    background-color: var(--vscode-dropdown-background) !important;
+    border-color: var(--vscode-dropdown-border) !important;
+    color: var(--vscode-dropdown-foreground) !important;
+    border: 0.5px solid;
+    width: 60% !important;
+    margin: 0.5rem !important;
+}
+
+.MuiAutocomplete-inputRoot:disabled {
+    background-color: var(--vscode-list-inactiveSelectionBackground) !important;
+    color: var(--vscode-list-inactiveSelectionForeground) !important;
+}
+
+.MuiInputBase-root {
+    background-color: var(--vscode-settings-textInputBackground) !important;
+    border-color: var(--vscode-settings-textInputBorder) !important;
+    color: var(--vscode-settings-textInputForeground) !important;
+}
+
+.MuiSvgIcon-root {
+    color: whitesmoke;
+}