Skip to content

Commit 264bd79

Browse files
datho7561vrubezhny
datho7561
authored and
vrubezhny
committed
Fix create serverless function view
- Split out the "invoke serverless function" webview from the "create serverless function" webview - For "create serverless function" and "invoke serverless function", wait on receiving a message from the webview before sending data to it - Fixing themeing in the "invoke serverless function" webview Fixes #4092 Signed-off-by: David Thompson <[email protected]>
1 parent 507fb51 commit 264bd79

File tree

13 files changed

+1035
-448
lines changed

13 files changed

+1035
-448
lines changed

‎build/esbuild.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const webviews = [
1616
'devfile-registry',
1717
'helm-chart',
1818
'helm-manage-repository',
19+
'invoke-serverless-function',
1920
'welcome',
2021
'feedback',
2122
'serverless-function',

‎src/serverlessFunction/view.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
workspace
2222
} from 'vscode';
2323
import { vsCommand } from '../vscommand';
24+
import { InvokeServerlessFunctionViewLoader } from '../webview/invoke-serverless-function/invokeServerlessFunctionLoader';
2425
import ServerlessFunctionViewLoader from '../webview/serverless-function/serverlessFunctionLoader';
2526
import ManageRepositoryViewLoader from '../webview/serverless-manage-repository/manageRepositoryLoader';
2627
import { ServerlessFunctionModel } from './functionModel';
@@ -222,7 +223,7 @@ export class ServerlessFunctionView implements TreeDataProvider<ExplorerItem>, D
222223

223224
@vsCommand('openshift.Serverless.invoke')
224225
static async invokeFunction(context: FunctionObject) {
225-
await ServerlessFunctionViewLoader.loadView(`${context.name} - Invoke`, true, context.context, context.folderURI, context.url);
226+
await InvokeServerlessFunctionViewLoader.loadView(`${context.name} - Invoke`, context.context, context.folderURI, context.url);
226227
}
227228

228229
@vsCommand('openshift.Serverless.openFunction')

‎src/webview/common-ext/utils.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,3 +147,7 @@ export function validatePath(value: string): string | null {
147147
JSON.parse(value) as unknown as string
148148
);
149149
}
150+
151+
export function getExtensionPath(): string {
152+
return extensions.getExtension(ExtensionID).extensionPath;
153+
}

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

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
body {
2+
&.vscode-light {
3+
background-color: var(--color-background--darken-05);
4+
}
5+
}
6+
7+
button {
8+
padding: 0;
9+
}
10+
11+
.margin {
12+
margin: 3rem;
13+
}
14+
15+
.mainContainer,
16+
.formContainer,
17+
.form {
18+
display: flex;
19+
flex-direction: column;
20+
font-family: var(--vscode-font-family) !important;
21+
}
22+
23+
.title {
24+
width: 100%;
25+
margin-bottom: 1rem;
26+
}
27+
28+
.subTitle {
29+
margin-bottom: 2rem;
30+
width: auto;
31+
word-spacing: 2px;
32+
text-align: left;
33+
}
34+
35+
.buttonStyle {
36+
text-align: center;
37+
overflow: hidden;
38+
text-overflow: ellipsis;
39+
color: var(--vscode-button-foreground);
40+
width: 3rem;
41+
height: 2.5rem !important;
42+
&:hover {
43+
background-color: '#BE0000' !important;
44+
}
45+
46+
text-transform: none;
47+
}
48+
49+
.MuiIconButton-root.Mui-disabled > .MuiSvgIcon-root {
50+
color: var(--vscode-titleBar-inactiveForeground) !important;
51+
}
52+
53+
.MuiButton-root.Mui-disabled {
54+
-webkit-text-fill-color: white !important;
55+
}
56+
57+
.labelStyle {
58+
text-align: center;
59+
text-transform: none;
60+
height: 2.5rem !important;
61+
background-color: var(--vscode-button-background) !important;
62+
border: 1px solid var(--vscode-settings-textInputForeground);
63+
}
64+
65+
.strategyContainer {
66+
display: flex;
67+
flex-direction: row;
68+
border-top: 3px solid;
69+
max-width: 55rem;
70+
margin-top: 2rem;
71+
padding-top: 0.5rem;
72+
padding-left: 1rem;
73+
min-height: 2rem;
74+
}
75+
76+
.cardContainer {
77+
display: flex;
78+
flex-direction: column;
79+
margin-top: 1rem;
80+
}
81+
82+
.strategySuccess {
83+
border-color: green;
84+
background-color: darkseagreen !important;
85+
}
86+
87+
.strategyWarning {
88+
border-color: orange;
89+
background-color: burlywood !important;
90+
}
91+
92+
.MuiTypography-root {
93+
font-family: var(--vscode-font-family) !important;
94+
}
95+
96+
.MuiFormHelperText-root {
97+
color: var(--vscode-foreground) !important;
98+
font-family: var(--vscode-font-family) !important;
99+
margin-left: 0px !important;
100+
}
101+
102+
.Mui-error {
103+
color: #EE0000 !important;
104+
}
105+
106+
.MuiSelect-select,
107+
.MuiAutocomplete-inputRoot {
108+
color: var(--vscode-dropdown-foreground) !important;
109+
}
110+
111+
.MuiMenu-paper {
112+
background-color: var(--vscode-dropdown-background) !important;
113+
color: var(--vscode-dropdown-foreground) !important;
114+
}
115+
116+
.MuiInputLabel-root,
117+
.MuiFormLabel-root {
118+
background-color: transparent;
119+
color: var(--vscode-settings-textInputForeground) !important;
120+
}
121+
122+
.MuiAutocomplete-inputRoot {
123+
padding: 0 !important;
124+
padding-left: 5px !important;
125+
height: 2.5rem !important;
126+
}
127+
128+
.MuiMenuItem-root {
129+
background-color: var(--vscode-dropdown-background) !important;
130+
color: var(--vscode-dropdown-foreground) !important;
131+
}
132+
133+
.MuiMenuItem-root:hover {
134+
background-color: var(--vscode-button-hoverBackground) !important;
135+
}
136+
137+
.MuiFormControl-root {
138+
border: none;
139+
&:hover {
140+
border: none;
141+
}
142+
}
143+
144+
.MuiOutlinedInput-notchedOutline {
145+
border-color: var(--vscode-settings-textInputForeground) !important;
146+
}
147+
148+
.MuiFormControl-fullWidth {
149+
max-width: 100% !important;
150+
}
151+
152+
.MuiSvgIcon-root,
153+
.MuiStepLabel-label {
154+
color: var(--vscode-button-foreground) !important;
155+
}
156+
157+
.successicon {
158+
color: #198754 !important;
159+
}
160+
161+
.erroricon {
162+
color: #ff3333 !important;
163+
}
164+
165+
.disabledicon {
166+
color: var(--vscode-settings-textInputForeground) !important;
167+
}
168+
169+
.MuiCircularProgress-svg {
170+
color: #EE0000 !important;
171+
}
172+
173+
.MuiOutlinedInput-root.Mui-disabled {
174+
border: 0px solid var(--vscode-tab-unfocusedActiveBorder) !important;
175+
}
176+
177+
.Mui-disabled {
178+
-webkit-text-fill-color: var(--vscode-titleBar-inactiveForeground) !important;
179+
}
180+
181+
.Mui-active {
182+
color: var(--vscode-button-hoverBackground) !important;
183+
}
184+
185+
.MuiAutocomplete-noOptions {
186+
background-color: var(--vscode-settings-textInputBackground);
187+
color: var(--vscode-settings-textInputForeground) !important;
188+
}
189+
190+
li:hover {
191+
background-color: var(--vscode-button-hoverBackground) !important;
192+
}
193+
194+
.MuiDialog-paper {
195+
border: 1px groove var(--vscode-activityBar-activeBorder) !important;
196+
border-radius: 1rem !important;
197+
margin: auto !important;
198+
background-color: #101418 !important;
199+
color: var(--vscode-settings-textInputForeground) !important
200+
}
201+
202+
.MuiTableCell-body {
203+
color: var(--vscode-button-foreground) !important
204+
}
205+
206+
.MuiTablePagination-toolbar {
207+
background-color: var(--vscode-button-secondaryHoverBackground) !important;
208+
color: var(--vscode-settings-textInputForeground) !important
209+
}

‎src/webview/invoke-serverless-function/app/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<base href="%BASE_URL%" />
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Serverless Function</title>
8+
<!-- meta http-equiv="Content-Security-Policy" -->
9+
<script>
10+
if (typeof acquireVsCodeApi !== 'undefined') {
11+
window.vscodeApi = acquireVsCodeApi();
12+
}
13+
</script>
14+
<style>
15+
html,
16+
body {
17+
padding: 0;
18+
overflow: visible;
19+
}
20+
21+
.box {
22+
display: flex;
23+
flex-flow: column;
24+
position: absolute;
25+
top: 0px;
26+
bottom: 1px;
27+
left: 0px;
28+
right: 0px;
29+
}
30+
31+
.box .row.header {
32+
flex: 0 1 auto;
33+
}
34+
35+
.box .row.content {
36+
flex: 1 1 auto;
37+
}
38+
</style>
39+
</head>
40+
<body>
41+
<div class="box" id="root"></div>
42+
<script src="%SCRIPT%" ></script>
43+
<link rel="stylesheet" href="%STYLE%"></link>
44+
</body>
45+
</html>

‎src/webview/invoke-serverless-function/app/index.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/*-----------------------------------------------------------------------------------------------
2+
* Copyright (c) Red Hat, Inc. All rights reserved.
3+
* Licensed under the MIT License. See LICENSE file in the project root for license information.
4+
*-----------------------------------------------------------------------------------------------*/
5+
import * as ReactDOM from 'react-dom';
6+
import * as React from 'react';
7+
import { WebviewErrorBoundary } from '../../common/webviewErrorBoundary';
8+
import { InvokeFunctionOrLoading } from './invokeFunction';
9+
10+
ReactDOM.render(
11+
<WebviewErrorBoundary webviewName='invokeServerlessFunction'>
12+
<InvokeFunctionOrLoading />
13+
</WebviewErrorBoundary>,
14+
document.getElementById('root'),
15+
);

0 commit comments

Comments
 (0)