Skip to content

Commit 3f682d7

Browse files
aabidsofi19aabidsofi19
committed
fix ui crash
Signed-off-by: aabidsofi19 <[email protected]>
1 parent cd5a545 commit 3f682d7

File tree

6 files changed

+273
-193
lines changed

6 files changed

+273
-193
lines changed

‎ui/src/components/ExtensionComponent/ExtensionComponent.js‎

Lines changed: 60 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect } from "react";
2-
import { Typography, Button, Tooltip } from "@mui/material";
2+
import { Typography, Button } from "@mui/material";
33
import { createTheme, ThemeProvider } from "@mui/material/styles";
44
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
55
import Tour from "../Walkthrough/Tour";
@@ -26,43 +26,49 @@ import {
2626
import { KanvasAnimation } from "../KanvasAnimation/KanvasAnimation";
2727
import { randomApplicationNameGenerator } from "../../utils";
2828
import {
29-
SistentThemeProviderWithoutBaseLine, InfoCircleIcon, CustomTooltip, IconWrapper
29+
SistentThemeProviderWithoutBaseLine,
30+
InfoCircleIcon,
31+
CustomTooltip,
32+
Box,
33+
// CustomTooltip,
3034
} from "@sistent/sistent";
31-
import {
32-
providerUrl,
33-
SELECTED_PROVIDER_NAME,
34-
} from "../utils/constants";
35+
import { providerUrl, SELECTED_PROVIDER_NAME } from "../utils/constants";
3536

3637
// Fallback theme provider for when Docker extension themes aren't available
3738
const DockerMuiThemeProviderWithFallback = ({ children }) => {
38-
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
39-
39+
const isDarkMode =
40+
window.matchMedia &&
41+
window.matchMedia("(prefers-color-scheme: dark)").matches;
42+
4043
// Check if Docker extension themes are available
4144
if (window.__ddMuiV5Themes) {
4245
try {
4346
return React.createElement(DockerMuiThemeProvider, {}, children);
4447
} catch (error) {
45-
console.warn('Docker MUI theme provider failed, falling back to default theme:', error);
48+
console.warn(
49+
"Docker MUI theme provider failed, falling back to default theme:",
50+
error,
51+
);
4652
}
4753
}
48-
54+
4955
// Fallback theme configuration
5056
const fallbackTheme = createTheme({
5157
palette: {
52-
mode: isDarkMode ? 'dark' : 'light',
58+
mode: isDarkMode ? "dark" : "light",
5359
primary: {
54-
main: '#00B39F',
60+
main: "#00B39F",
5561
},
5662
secondary: {
57-
main: '#00D3A9',
63+
main: "#00D3A9",
5864
},
5965
background: {
60-
default: isDarkMode ? '#121212' : '#ffffff',
61-
paper: isDarkMode ? '#1e1e1e' : '#ffffff',
66+
default: isDarkMode ? "#121212" : "#ffffff",
67+
paper: isDarkMode ? "#1e1e1e" : "#ffffff",
6268
},
6369
},
6470
});
65-
71+
6672
return React.createElement(ThemeProvider, { theme: fallbackTheme }, children);
6773
};
6874

@@ -223,15 +229,6 @@ const ExtensionsComponent = () => {
223229
const [filter, setFilter] = useState(null);
224230
const [userDesigns, setUserDesigns] = useState(null);
225231

226-
// useEffect(() => {
227-
// if (meshAdapters && meshAdapters.length !== 0) {
228-
// setSwitchesState(
229-
// meshAdapters.map((adapter) => ({
230-
// [adapter.name]: false,
231-
// })),
232-
// )
233-
// }
234-
// }, [meshAdapters])
235232
const [KanvasVersion, setKanvasVersion] = useState(null);
236233

237234
const logout = () => {
@@ -240,29 +237,6 @@ const ExtensionsComponent = () => {
240237
.catch(console.error);
241238
};
242239

243-
const onSubmit = async (feedback) => {
244-
const userFeedbackRequestBody = {
245-
scope: feedback?.label,
246-
message: feedback?.message,
247-
page_location: "",
248-
metadata: {},
249-
};
250-
fetch(`${providerUrl}` + "/api/identity/users/notify/feedback", {
251-
method: httpPost,
252-
body: userFeedbackRequestBody,
253-
})
254-
.then(console.log)
255-
.catch(console.error);
256-
257-
// if (resp.error) {
258-
// window.ddClient.desktopUI.toast.error(
259-
// "Error submitting feedback. Check your Internet connection and try again."
260-
// );
261-
// return;
262-
// }
263-
// window.ddClient.desktopUI.toast.success("Thank you! We have received your feedback.");
264-
};
265-
266240
useEffect(() => {
267241
let ws = new WebSocket("ws://127.0.0.1:7877/ws");
268242
ws.onmessage = (msg) => {
@@ -367,45 +341,6 @@ const ExtensionsComponent = () => {
367341
isChanging(true);
368342
setIsHovered(true);
369343
};
370-
// const submitConfig = (mesh, deprovision = false, meshAdapters) => {
371-
// const targetMesh = meshAdapters.find((msh) => msh.name === mesh)
372-
// const deployQuery = targetMesh.ops.find((op) => !op.category).key
373-
// const data = {
374-
// adapter: targetMesh.adapter_location,
375-
// query: deployQuery,
376-
// namespace: 'default',
377-
// customBody: '',
378-
// deleteOp: deprovision ? 'on' : '',
379-
// }
380-
381-
// const params = Object.keys(data)
382-
// .map(
383-
// (key) => `${encodeURIComponentkey)}=${encodeURIComponent(data[key])}`,
384-
// )
385-
// .join('&')
386-
// fetch(proxyUrl + '/api/system/adapter/operation', {
387-
// credentials: 'same-origin',
388-
// method: 'POST',
389-
// credentials: 'include',
390-
// headers: {
391-
// 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
392-
// },
393-
// mode: 'no-cors',
394-
// body: params,
395-
// })
396-
// .then(() => {
397-
// window.ddClient.desktopUI.toast.success(
398-
// `Request received. ${deprovision ? 'Deprovisioning' : 'Provisioning'
399-
// } Service Mesh...`,
400-
// )
401-
// })
402-
// .catch(() => {
403-
// window.ddClient.desktopUI.toast.error(
404-
// `Could not ${deprovision ? 'Deprovision' : 'Provision'
405-
// } the Service Mesh due to some error.`,
406-
// )
407-
// })
408-
// }
409344

410345
const getBase64EncodedFile = (file) => {
411346
return new Promise((resolve, reject) => {
@@ -465,9 +400,7 @@ const ExtensionsComponent = () => {
465400

466401
const OpenDocs = () => {
467402
// window.location.href = proxyUrl;
468-
window.ddClient.host.openExternal(
469-
`https://docs.layer5.io/kanvas/`,
470-
);
403+
window.ddClient.host.openExternal(`https://docs.layer5.io/kanvas/`);
471404
};
472405

473406
const launchKanvas = () => {
@@ -495,19 +428,28 @@ const ExtensionsComponent = () => {
495428
right: "1rem",
496429
}}
497430
>
498-
<DocsIcon width="24" height="24" CustomColor={isDarkTheme ? "white" : "#3C494F"} alt="Docs" />&nbsp;Docs
431+
<DocsIcon
432+
width="24"
433+
height="24"
434+
CustomColor={isDarkTheme ? "white" : "#3C494F"}
435+
alt="Docs"
436+
/>
437+
&nbsp;Docs
499438
</StyledButton>
500-
501439
</SistentThemeProviderWithoutBaseLine>
502-
{isLoggedIn && <Tour />}
440+
{/* {isLoggedIn && <Tour />} */}
503441
<div
504442
style={{
505443
display: "flex",
506444
justifyContent: "space-evenly",
507445
}}
508446
>
509447
<div>
510-
<KanvasHorizontalLight width="600" height="auto" CustomColor={isDarkTheme ? "white" : "#3C494F"} />
448+
<KanvasHorizontalLight
449+
width="600"
450+
height="auto"
451+
CustomColor={isDarkTheme ? "white" : "#3C494F"}
452+
/>
511453

512454
<Typography sx={{ margin: "auto", paddingTop: "-1rem" }}>
513455
Design and operate your cloud native deployments with Kanvas.
@@ -578,7 +520,7 @@ const ExtensionsComponent = () => {
578520
providerUrl +
579521
"?source=aHR0cDovL2xvY2FsaG9zdDo3ODc3L3Rva2VuL3N0b3Jl&provider_version=v0.3.14";
580522
console.log("provider url", url);
581-
window.ddClient.host.openExternal(url);
523+
window?.ddClient?.host?.openExternal?.(url);
582524
}}
583525
>
584526
Login
@@ -595,11 +537,27 @@ const ExtensionsComponent = () => {
595537
>
596538
{/* <RemoteShellLoader /> */}
597539
<AccountDiv>
598-
<Typography
599-
sx={{ marginBottom: "2rem", whiteSpace: " nowrap" }}
540+
<Box
541+
display="flex"
542+
gap={2}
543+
mb="2rem"
544+
alignItems={"center"}
545+
justifyItems={"center"}
546+
justifyContent={"space-between"}
600547
>
601-
Import Design File
602-
</Typography>
548+
<Typography sx={{ whiteSpace: " nowrap" }}>
549+
Import Design File
550+
</Typography>
551+
<CustomTooltip title="Supported file types include Kubernetes manifests, Helm charts, Kustomize, and Docker Compose. Learn more at https://docs.kanvas.new">
552+
<div>
553+
<InfoCircleIcon
554+
height={24}
555+
width={24}
556+
style={{ minWidth: "auto", marginLeft: "8px" }}
557+
/>
558+
</div>
559+
</CustomTooltip>
560+
</Box>
603561
<div style={{ paddingBottom: "1rem" }}>
604562
<label htmlFor="upload-button">
605563
<StyledButton
@@ -620,12 +578,6 @@ const ExtensionsComponent = () => {
620578
Browse...
621579
</StyledButton>
622580
</label>
623-
<CustomTooltip title="Supported file types include Kubernetes manifests, Helm charts, Kustomize, and Docker Compose. Learn more at https://docs.kanvas.new">
624-
<IconWrapper>
625-
626-
<InfoCircleIcon style={{ minWidth: 'auto', padding: '4px' }} />
627-
</IconWrapper>
628-
</CustomTooltip>
629581
</div>
630582
</AccountDiv>
631583
</ExtensionWrapper>
@@ -692,11 +644,11 @@ const ExtensionsComponent = () => {
692644
<SectionWrapper>
693645
{isLoggedIn && (
694646
<div style={{ paddingTop: isLoggedIn ? "1.2rem" : null }}>
695-
<Tooltip title="Kanvas Server version">
647+
<CustomTooltip title="Kanvas Server version">
696648
<VersionText variant="span" component="span" align="end">
697-
{KanvasVersion}
649+
{KanvasVersion || ""}
698650
</VersionText>
699-
</Tooltip>
651+
</CustomTooltip>
700652
<a
701653
href={`https://docs.Kanvas.io/project/releases/${KanvasVersion}`}
702654
target="_blank"

‎ui/src/img/SVGs/KanvasGreen.js‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,37 @@ const KanvasGreen = ({ height = 70, width = 72, ...props }) => {
1010
fill="none"
1111
{...props}
1212
>
13-
14-
<polygon fill="#00d3a9" points="261.82 30.1 261.82 228.75 433.99 129.07 261.82 30.1"/>
15-
<polygon fill="#00b39f" points="261.82 270.3 261.82 469.9 435.56 370.56 261.82 270.3"/>
16-
<g opacity=".8">
17-
<polygon fill="#00b39f" points="237.03 227.38 237.03 31.77 66.97 129.25 237.03 227.38"/>
18-
</g>
19-
<g opacity=".8">
20-
<polygon fill="#00b39f" points="237.03 468.98 237.03 271.74 66.56 370.43 237.03 468.98"/>
21-
</g>
22-
<g opacity=".8">
23-
<polygon fill="#00b39f" points="447.37 348.75 447.37 149.97 275.4 249.52 447.37 348.75"/>
24-
</g>
25-
<polygon fill="#00d3a9" points="52.63 149.59 52.63 349.85 225.87 249.56 52.63 149.59"/>
26-
</svg>
13+
<polygon
14+
fill="#00d3a9"
15+
points="261.82 30.1 261.82 228.75 433.99 129.07 261.82 30.1"
16+
/>
17+
<polygon
18+
fill="#00b39f"
19+
points="261.82 270.3 261.82 469.9 435.56 370.56 261.82 270.3"
20+
/>
21+
<g opacity=".8">
22+
<polygon
23+
fill="#00b39f"
24+
points="237.03 227.38 237.03 31.77 66.97 129.25 237.03 227.38"
25+
/>
26+
</g>
27+
<g opacity=".8">
28+
<polygon
29+
fill="#00b39f"
30+
points="237.03 468.98 237.03 271.74 66.56 370.43 237.03 468.98"
31+
/>
32+
</g>
33+
<g opacity=".8">
34+
<polygon
35+
fill="#00b39f"
36+
points="447.37 348.75 447.37 149.97 275.4 249.52 447.37 348.75"
37+
/>
38+
</g>
39+
<polygon
40+
fill="#00d3a9"
41+
points="52.63 149.59 52.63 349.85 225.87 249.56 52.63 149.59"
42+
/>
43+
</svg>
2744
);
2845
};
2946

0 commit comments

Comments
 (0)