add link text

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>
redhat-developer · Oct 30, 2023 · 1d95a2e · 1d95a2e
1 parent 4411a9d
commit 1d95a2e
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 8 deletions.
diff --git a/src/webview/helm-chart/app/helmListItem.tsx b/src/webview/helm-chart/app/helmListItem.tsx
@@ -2,14 +2,17 @@
  *  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, Chip, Stack, SvgIcon, Typography } from '@mui/material';
+import { Box, Button, Chip, Link, Stack, SvgIcon, Typography } from '@mui/material';
 import * as React from 'react';
 import HelmIcon from '../../../../images/helm/helm.svg';
 import { Chart, ChartResponse } from '../helmChartType';
+import { VSCodeMessage } from '../vsCodeMessage';
+import { Launch } from '@mui/icons-material';
 
 export type HelmListItemProps = {
     helmChart: ChartResponse;
     selectedVersion: Chart;
+    isDetailedPage?: boolean;
     buttonCallback?: () => void;
 };
 
@@ -30,12 +33,13 @@ export function HelmListItem(props: HelmListItemProps) {
                     <HelmChartListContent
                         helmChart={props.helmChart}
                         selectedVersion={props.selectedVersion}
+                        isDetailedPage={props.isDetailedPage}
                         buttonCallback={props.buttonCallback}
                     />
                 </Box>
             ) : (
                 <>
-                    <HelmChartListContent helmChart={props.helmChart} selectedVersion={props.selectedVersion} />
+                    <HelmChartListContent helmChart={props.helmChart} selectedVersion={props.selectedVersion} isDetailedPage={props.isDetailedPage}/>
                 </>
             )}
         </>
@@ -56,6 +60,26 @@ function HelmChartListContent(props: HelmListItemProps) {
             .join(' ');
     }
 
+    function LinkButton(props: { href: string; onClick: () => void; children }) {
+        return (
+            <Link href={props.href} underline='none' variant='body2'>
+                <Button
+                    variant='text'
+                    style={{ textTransform: 'none' }}
+                    onClick={(e) => {
+                        if (props.onClick) {
+                            props.onClick();
+                        }
+                        e.preventDefault();
+                    }}
+                    endIcon={<Launch />}
+                >
+                    {props.children}
+                </Button>
+            </Link>
+        );
+    }
+
     return (
         <Stack direction='row' spacing={3} sx={{ width: 'calc(100% - 16px)' }} alignItems='center'>
             <Box
@@ -104,10 +128,25 @@ function HelmChartListContent(props: HelmListItemProps) {
                 >
                     {props.selectedVersion.description}
                 </Typography>
-                <Typography
-                    variant='body2'
-                    sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
-                >Repo: https://charts.openshift.io/</Typography>
+                {props.isDetailedPage &&
+                    <LinkButton
+                        href='https://charts.openshift.io/'
+                        onClick={() => {
+                            VSCodeMessage.postMessage({
+                                action: 'sendTelemetry',
+                                data: {
+                                    actionName: 'helmRepoInBrowser',
+                                    properties: {
+                                        // eslint-disable-next-line camelcase
+                                        url: 'https://charts.openshift.io/',
+                                        // eslint-disable-next-line camelcase
+                                        helmChartName: props.helmChart.displayName,
+                                    },
+                                },
+                            });
+                        }} >https://charts.openshift.io/
+                    </LinkButton>
+                }
                 <Stack direction='row' spacing={1}>
                     {props.selectedVersion.annotations['charts.openshift.io/providerType'] &&
                         <Chip

diff --git a/src/webview/helm-chart/app/helmModal.tsx b/src/webview/helm-chart/app/helmModal.tsx
@@ -118,7 +118,7 @@ export const HelmModal = React.forwardRef(
                         alignItems='flex-start'
                         marginBottom={1}
                     >
-                        <HelmListItem helmChart={props.helmChart} selectedVersion={selectedVersion} />
+                        <HelmListItem helmChart={props.helmChart} selectedVersion={selectedVersion} isDetailedPage={true} />
                         <IconButton onClick={() => {
                             props.closeModal()
                         }}>

diff --git a/src/webview/helm-chart/helmChartLoader.ts b/src/webview/helm-chart/helmChartLoader.ts
@@ -7,7 +7,7 @@ import * as vscode from 'vscode';
 import * as JSYAML from 'js-yaml';
 import { OpenShiftExplorer } from '../../explorer';
 import * as Helm from '../../helm/helm';
-import { ExtCommandTelemetryEvent } from '../../telemetry';
+import sendTelemetry, { ExtCommandTelemetryEvent } from '../../telemetry';
 import { ExtensionID } from '../../util/constants';
 import { vsCommand } from '../../vscommand';
 import { loadWebviewHtml } from '../common-ext/utils';
@@ -123,6 +123,15 @@ function helmChartMessageListener(event: any): void {
             );
             break;
         }
+        /**
+         * Send a telemetry message
+         */
+        case 'sendTelemetry': {
+            const actionName: string = event.data.actionName;
+            const properties: {[key: string]: string} = event.data.properties;
+            void sendTelemetry(actionName, properties);
+            break;
+        }
         default: {
             void panel.webview.postMessage(
                 {