Merge pull request #14 from layer5io/ui-packages

UI packages updated to include Kanvas SVG components and animations

Author: hortison

ui/config-overrides.js

@@ -1,4 +1,5 @@
 const webpack = require('webpack');
+
 module.exports = function override(config, env) {
     config.resolve.fallback = {
         url: require.resolve('url'),
@@ -11,6 +12,30 @@ module.exports = function override(config, env) {
         buffer: require.resolve('buffer'),
         stream: require.resolve('stream-browserify'),
     };
+    
+    // Handle the @docker/docker-mui-theme ES6 module issue
+    config.module.rules.unshift({
+        test: /\.js$/,
+        include: /node_modules\/@docker\/docker-mui-theme/,
+        use: {
+            loader: 'babel-loader',
+            options: {
+                presets: [
+                    ['@babel/preset-env', {
+                        modules: 'auto',
+                        targets: {
+                            browsers: ['last 2 versions']
+                        }
+                    }],
+                    '@babel/preset-react'
+                ],
+                plugins: [
+                    '@babel/plugin-transform-modules-commonjs'
+                ]
+            }
+        }
+    });
+    
     config.plugins.push(
         new webpack.ProvidePlugin({
             process: 'process/browser',

ui/package-lock.json

@@ -5,17 +5,17 @@
   "description": "the cloud native management plane",
   "main": "index.js",
   "dependencies": {
-    "@docker/docker-mui-theme": "^0.0.4",
+    "@docker/docker-mui-theme": "^0.0.13",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
-    "@sistent/sistent": "0.14.201",
     "@mui/icons-material": "^5.5.1",
     "@mui/material": "^5.5.3",
     "@mui/styled-engine-sc": "^5.5.2",
     "@mui/styles": "^5.5.3",
+    "@sistent/sistent": "0.14.201",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
@@ -68,6 +68,13 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-transform-class-properties": "^7.27.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.27.1",
+    "@babel/plugin-transform-runtime": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
     "path-browserify": "^1.0.1"
   }
 }

ui/package.json

@@ -1,19 +1,19 @@
 import React, { useState, useEffect } from "react";
-import { Typography, Button, Tooltip, Grid } from "@mui/material";
+import { Typography, Button, Tooltip } from "@mui/material";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 // import ConsulIcon from '../../img/SVGs/consulIcon'
 // import IstioIcon from '../../img/SVGs/IstioIcon'
 // import KumaIcon from '../../img/SVGs/kumaIcon'
 // import LinkerdIcon from '../../img/SVGs/linkerdIcon'
 import Tour from "../Walkthrough/Tour";
-import PublishIcon from "../../assets/design";
 import { Avatar } from "@mui/material";
 // import NginxIcon from '../../img/SVGs/nginxIcon'
 // import AppmeshIcon from '../../img/SVGs/appmeshIcon'
 // import CiliumIcon from '../../img/SVGs/ciliumIcon'
 // import TraefikIcon from '../../img/SVGs/traefikIcon'
-import Meshery from "../../img/SVGs/meshery";
-import KanvasIcon from "../../img/meshery-logo/CustomKanvasLogo";
+import Kanvas from "../../img/SVGs/Kanvas";
+import KanvasIcon from "../../img/kanvas-logo/CustomKanvasLogo";
 import { DockerMuiThemeProvider } from "@docker/docker-mui-theme";
 import CssBaseline from "@mui/material/CssBaseline";
 import { LoadComp } from "../LoadingComponent/LoadComp";
@@ -28,23 +28,50 @@ import {
   LogoutButton,
   StyledButton,
   StyledLink,
-  MeshModels,
-  PublishCard,
 } from "./styledComponents";
-import { MesheryAnimation } from "../MesheryAnimation/MesheryAnimation";
+import { KanvasAnimation } from "../KanvasAnimation/KanvasAnimation";
 import { randomApplicationNameGenerator } from "../../utils";
-import CatalogChart from "../Catalog/Chart";
 import {
-  CatalogCard,
-  FeedbackButton,
   SistentThemeProviderWithoutBaseLine,
 } from "@sistent/sistent";
 import {
-  MESHMAP,
   providerUrl,
   SELECTED_PROVIDER_NAME,
 } from "../utils/constants";
 
+// Fallback theme provider for when Docker extension themes aren't available
+const DockerMuiThemeProviderWithFallback = ({ children }) => {
+  const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  
+  // Check if Docker extension themes are available
+  if (window.__ddMuiV5Themes) {
+    try {
+      return React.createElement(DockerMuiThemeProvider, {}, children);
+    } catch (error) {
+      console.warn('Docker MUI theme provider failed, falling back to default theme:', error);
+    }
+  }
+  
+  // Fallback theme configuration
+  const fallbackTheme = createTheme({
+    palette: {
+      mode: isDarkMode ? 'dark' : 'light',
+      primary: {
+        main: '#00B39F',
+      },
+      secondary: {
+        main: '#00D3A9',
+      },
+      background: {
+        default: isDarkMode ? '#121212' : '#ffffff',
+        paper: isDarkMode ? '#1e1e1e' : '#ffffff',
+      },
+    },
+  });
+  
+  return React.createElement(ThemeProvider, { theme: fallbackTheme }, children);
+};
+
 const AuthenticatedMsg = "Authenticated";
 const UnauthenticatedMsg = "Unauthenticated";
 const proxyUrl = "http://127.0.0.1:7877";
@@ -211,7 +238,7 @@ const ExtensionsComponent = () => {
   //     )
   //   }
   // }, [meshAdapters])
-  const [mesheryVersion, setMesheryVersion] = useState(null);
+  const [KanvasVersion, setKanvasVersion] = useState(null);
 
   const logout = () => {
     fetch(proxyUrl + "/token", { method: httpDelete })
@@ -298,7 +325,7 @@ const ExtensionsComponent = () => {
           //   .catch(console.err)
           fetch(proxyUrl + "/api/system/version")
             .then((result) => result.text())
-            .then((result) => setMesheryVersion(JSON.parse(result)?.build))
+            .then((result) => setKanvasVersion(JSON.parse(result)?.build))
             .catch(console.error);
           fetch(`${providerUrl}/api/catalog/content/pattern`)
             .then((result) => result.text())
@@ -445,17 +472,17 @@ const ExtensionsComponent = () => {
   const OpenDocs = () => {
     // window.location.href = proxyUrl;
     window.ddClient.host.openExternal(
-      `https://docs.meshery.io/installation/docker/docker-extension`,
+      `https://docs.layer5.io/kanvas/`,
     );
   };
 
-  const launchMeshery = () => {
-    console.log("Launching Meshery...");
+  const launchKanvas = () => {
+    console.log("Launching Kanvas...");
     window.location.href = proxyUrl;
   };
 
   return (
-    <DockerMuiThemeProvider>
+    <DockerMuiThemeProviderWithFallback>
       <CssBaseline />
       {changing && (
         <LoadingDiv sx={{ opacity: "1" }}>
@@ -516,17 +543,17 @@ const ExtensionsComponent = () => {
                       onMouseOver={onMouseOver}
                     >
                       {isHovered ? (
-                        <MesheryAnimation height={70} width={72} />
+                        <KanvasAnimation height={70} width={72} />
                       ) : (
-                        <Meshery height={70} width={72} />
+                        <Kanvas height={70} width={72} />
                       )}
                     </div>
                   ) : (
-                    <Meshery height={70} width={72} />
+                    <Kanvas height={70} width={72} />
                   )}
                 </a>
                 {isLoggedIn ? (
-                  <LinkButton onClick={launchMeshery}>
+                  <LinkButton onClick={launchKanvas}>
                     <StyledLink
                       style={{ textDecoration: "none", color: "white" }}
                       // href={
@@ -536,7 +563,7 @@ const ExtensionsComponent = () => {
                       //     "&provider=${SELECTED_PROVIDER_NAME}`
                       // }
                     >
-                      Launch Meshery
+                      Launch Kanvas
                     </StyledLink>
                   </LinkButton>
                 ) : (
@@ -663,13 +690,13 @@ const ExtensionsComponent = () => {
         <SectionWrapper>
           {isLoggedIn && (
             <div style={{ paddingTop: isLoggedIn ? "1.2rem" : null }}>
-              <Tooltip title="Meshery Server version">
+              <Tooltip title="Kanvas Server version">
                 <VersionText variant="span" component="span" align="end">
-                  {mesheryVersion}
+                  {KanvasVersion}
                 </VersionText>
               </Tooltip>
               <a
-                href={`https://docs.meshery.io/project/releases/${mesheryVersion}`}
+                href={`https://docs.Kanvas.io/project/releases/${KanvasVersion}`}
                 target="_blank"
                 rel="noreferrer"
                 style={{ color: isDarkTheme ? "white" : "black" }}
@@ -682,7 +709,7 @@ const ExtensionsComponent = () => {
           )}
         </SectionWrapper>
       </ComponentWrapper>
-    </DockerMuiThemeProvider>
+    </DockerMuiThemeProviderWithFallback>
   );
 };
 

ui/src/components/ExtensionComponent/ExtensionComponent.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import "./mesheryAnimation.css";
+import "./kanvasAnimation.css";
 
 
 function getClassName(className, isActive) {
@@ -10,7 +10,7 @@ function getClassName(className, isActive) {
   return `${className} active`;
 }
 
-export const MesheryAnimation = (props) => {
+export const KanvasAnimation = (props) => {
   const [isActive, setIsActive] = useState(true);
 
   useEffect(() => {

ui/src/components/MesheryAnimation/MesheryAnimation.js renamed to ui/src/components/KanvasAnimation/KanvasAnimation.js

@@ -0,0 +1,51 @@
+import React from "react";
+
+const Kanvas = ({ height = 70, width = 72, ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 135 136"
+      height={height}
+      width={width}
+      fill="none"
+      {...props}
+    >
+      <defs>
+        <linearGradient id="paint0_linear_4485_12569" x1="47.8243" y1="132.582" x2="112.578" y2="2.09647" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#00B39F"/>
+          <stop offset="1" stopColor="#00D3A9"/>
+        </linearGradient>
+      </defs>
+      <path
+        d="M0 0H107.969C123.574 0 135 11.4264 135 27.0312V135.188H27.0312C11.4264 135.188 0 123.761 0 108.156V0Z"
+        fill="url(#paint0_linear_4485_12569)"
+      />
+      <path
+        d="M41.3506 26.7969H54.1025V48.4219H48.2822V32.6172H41.3506V26.7969Z"
+        fill="white"
+      />
+      <path
+        d="M41.3506 63.8906H54.1025V69.7109H41.3506V63.8906Z"
+        fill="white"
+      />
+      <path
+        d="M41.3506 85.5156H54.1025V91.3359H41.3506V85.5156Z"
+        fill="white"
+      />
+      <path
+        d="M69.7109 26.7969H82.4629V48.4219H76.6426V32.6172H69.7109V26.7969Z"
+        fill="white"
+      />
+      <path
+        d="M69.7109 63.8906H82.4629V69.7109H69.7109V63.8906Z"
+        fill="white"
+      />
+      <path
+        d="M69.7109 85.5156H82.4629V91.3359H69.7109V85.5156Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default Kanvas;

ui/src/components/MesheryAnimation/mesheryAnimation.css renamed to ui/src/components/KanvasAnimation/kanvasAnimation.css

@@ -0,0 +1,9 @@
+import React from "react";
+
+const DocsIcon = ({ width, height }) => (
+    <svg width={width} height={height} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" stylefont-size="unset" ><title>Documentation</title><path d="M416 221.25V416a48 48 0 01-48 48H144a48 48 0 01-48-48V96a48 48 0 0148-48h98.75a32 32 0 0122.62 9.37l141.26 141.26a32 32 0 019.37 22.62z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path d="M256 56v120a32 32 0 0032 32h120M176 288h160M176 368h160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg>
+
+
+);
+
+export default DocsIcon;