getting templates from cli

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

src/serverlessFunction/types.ts

@@ -18,6 +18,7 @@ export interface FunctionContent {
     image?: string;
     imageDigest?: string;
     builder?: string;
+    invoke?: string;
     invocation?: { format?: string };
 }
 
@@ -71,8 +72,6 @@ export interface ClusterVersion {
     ];
 }
 
-
-
 export interface InvokeFunction {
     instance: string;
     id: string;

src/webview/common/propertyTypes.ts

@@ -54,6 +54,7 @@ export interface HelmChartHomePageProps extends React.AnchorHTMLAttributes<HTMLA
 }
 
 export interface CreateFunctionPageProps extends DefaultProps {
+    basicTemplates: string[],
     onCreateSubmit: (name: string, language: string, template: string, location: Uri, image: string) => void;
 }
 
@@ -63,6 +64,8 @@ export interface InvokeFunctionPageProps extends DefaultProps {
     uri: Uri;
     instance: string;
     invokeURL: string;
+    template: string;
+    basicTemplates: string[];
     onInvokeSubmit: (name: string, instance: string, id: string, path: string, contentType: string, format: string, source: string,
         type: string, data: string, file: string, enableUrl: boolean, invokeURL: string) => void;
 }

src/webview/serverless-function/app/createFunction.tsx

@@ -30,7 +30,6 @@ export class CreateFunction extends React.Component<CreateFunctionPageProps, {
         helpText?: string
     },
     images: string[],
-    baseTemplates: string[],
     templates: string[],
     language: string,
     template: string,
@@ -53,7 +52,6 @@ export class CreateFunction extends React.Component<CreateFunctionPageProps, {
                 helpText: 'Image name should be in the form of \'[registry]/[namespace]/[name]:[tag]\''
             },
             images: [],
-            baseTemplates: [],
             templates: [],
             language: '',
             template: '',
@@ -62,7 +60,7 @@ export class CreateFunction extends React.Component<CreateFunctionPageProps, {
             showLoadScreen: false
         }
         VSCodeMessage.postMessage({
-            action: 'getTemplates'
+            action: 'selectFolder'
         });
     }
 
@@ -100,13 +98,6 @@ export class CreateFunction extends React.Component<CreateFunctionPageProps, {
                         wsFolderItems: message.data.wsFolderItems
                     });
                 }
-            } else if (message.data.action === 'getTemplates') {
-                this.setState({
-                    baseTemplates: message.data.basicTemplates
-                });
-                VSCodeMessage.postMessage({
-                    action: 'selectFolder'
-                });
             }
         });
     }
@@ -139,7 +130,7 @@ export class CreateFunction extends React.Component<CreateFunctionPageProps, {
     handleDropDownChange = (_event: any, value: string, isLang = false): void => {
         if (isLang) {
             this.setState({
-                templates: this.state.baseTemplates[this.convert(value)]
+                templates: this.props.basicTemplates[this.convert(value)]
             });
             this.setState({
                 language: value,

src/webview/serverless-function/app/home.scss

@@ -46,6 +46,10 @@ button {
     text-transform: none;
 }
 
+.MuiIconButton-root.Mui-disabled > .MuiSvgIcon-root {
+    color: var(--vscode-titleBar-inactiveForeground) !important;
+}
+
 .MuiButton-root.Mui-disabled {
     -webkit-text-fill-color: white !important;
 }
@@ -171,7 +175,7 @@ button {
 }
 
 .Mui-disabled {
-    -webkit-text-fill-color: var(--vscode-button-foreground) !important;
+    -webkit-text-fill-color: var(--vscode-titleBar-inactiveForeground) !important;
 }
 
 .Mui-active {

src/webview/serverless-function/app/home.tsx

@@ -16,7 +16,10 @@ export class ServerlessFunction extends React.Component<DefaultProps, {
     id: any,
     folderURI: Uri,
     instance: string,
-    invokeURL: string
+    invokeURL: string,
+    runtime: string,
+    basicTemplates: string[],
+    template: string
 }> {
 
     constructor(props: DefaultProps | Readonly<DefaultProps>) {
@@ -27,7 +30,10 @@ export class ServerlessFunction extends React.Component<DefaultProps, {
             id: undefined,
             folderURI: undefined,
             instance: '',
-            invokeURL: ''
+            invokeURL: '',
+            runtime: '',
+            basicTemplates: [],
+            template: ''
         }
     }
 
@@ -40,7 +46,15 @@ export class ServerlessFunction extends React.Component<DefaultProps, {
                     id: message.data.id,
                     folderURI: message.data.uri,
                     instance: message.data.instance,
-                    invokeURL: message.data.url
+                    invokeURL: message.data.url,
+                    runtime: message.data.runtime,
+                    template: message.data.template,
+                    basicTemplates: message.data.basicTemplates
+                })
+            } else if (message.data.action === 'create') {
+                this.setState({
+                    invoke: false,
+                    basicTemplates: message.data.basicTemplates
                 })
             }
         });
@@ -80,9 +94,10 @@ export class ServerlessFunction extends React.Component<DefaultProps, {
         return (
             this.state.invoke ?
                 <InvokeFunction instance={this.state.instance} uri={this.state.folderURI} name={this.state.name}
-                    invokeURL={this.state.invokeURL} id={this.state.id} onInvokeSubmit={this.handleInvokeSubmit} />
+                    invokeURL={this.state.invokeURL} id={this.state.id}
+                    template={this.state.template} basicTemplates={this.state.basicTemplates} onInvokeSubmit={this.handleInvokeSubmit} />
                 :
-                <CreateFunction onCreateSubmit={this.handleCreateSubmit} />
+                <CreateFunction onCreateSubmit={this.handleCreateSubmit} basicTemplates={this.state.basicTemplates} />
         )
     }
 }

src/webview/serverless-function/app/invokeFunction.tsx

@@ -33,7 +33,7 @@ export class InvokeFunction extends React.Component<InvokeFunctionPageProps, {
             contentType: 'text/plain',
             source: '/boson/fn',
             type: 'boson.fn',
-            format: 'HTTP',
+            format: props.template?.length > 0 ? props.template : 'http',
             input: 'Hello World',
             inputFilePath: '',
             mode: 'text',
@@ -206,7 +206,6 @@ export class InvokeFunction extends React.Component<InvokeFunctionPageProps, {
             'video/3gpp2',
             'application/x-7z-compressed',
         ];
-        const templates = ['HTTP', 'Cloud Events'];
         return (
             <div className='mainContainer margin'>
                 <div className='title'>
@@ -319,8 +318,9 @@ export class InvokeFunction extends React.Component<InvokeFunctionPageProps, {
                                 </Button>
                                 <Autocomplete
                                     defaultValue={format}
+                                    disabled={this.props.template !== undefined}
                                     id='format-dropdown'
-                                    options={templates}
+                                    options={this.props.basicTemplates}
                                     onChange={(e, v) => this.handleDropDownChange(e, v)}
                                     PaperComponent={({ children }) => (
                                         <Paper sx={{

src/webview/serverless-function/serverlessFunctionLoader.ts

@@ -121,14 +121,6 @@ async function messageListener(panel: vscode.WebviewPanel, event: any): Promise<
             panel.dispose();
             break;
         }
-        case 'getTemplates': {
-            const templates = await Functions.getInstance().getTemplates();
-            await panel?.webview.postMessage({
-                action: eventName,
-                basicTemplates: templates
-            });
-            break;
-        }
         default:
             break;
     }
@@ -163,25 +155,39 @@ export default class ServerlessFunctionViewLoader {
             panel.reveal(vscode.ViewColumn.One);
             return null;
         }
+        const templates = await Functions.getInstance().getTemplates();
         if (invoke) {
             const panel = await this.createView(title);
             const getEnvFuncId = crypto.randomUUID();
             ServerlessFunctionViewLoader.invokePanelMap.set(title, panel);
+            const yamlContent = await Utils.getFuncYamlContent(folderURI.fsPath);
+            let template: string, runtime: string, basicTemplates: string[] = ['cloudevent', 'http'];
+            if (yamlContent) {
+                template = yamlContent.invoke;
+                runtime = yamlContent.runtime;
+                basicTemplates = template ? templates[runtime] : basicTemplates;
+            }
             void panel.webview.postMessage({
                 action: 'invoke',
                 instance: status,
                 name: title.substring(0, title.indexOf('-')).trim(),
                 id: getEnvFuncId,
                 uri: folderURI,
+                runtime,
+                template,
+                basicTemplates,
                 url
             });
             return panel;
         } else if (!invoke) {
-            return await this.createView(title);
+            const panel = await this.createView(title);
+            void panel.webview.postMessage({
+                action: 'create',
+                basicTemplates: templates
+            });
+            return panel;
         }
-
-        return this.createView(title);
-
+        return null;
     }
 
     private static async createView(