Merge pull request #73 from layer5io/fix-bugs

Fix bugs

Author: aabidsofi19

ui/src/components/ExtensionComponent/AuthedDashboard.js

@@ -19,7 +19,13 @@ import {
   StyledButtonLink,
 } from "./styledComponents";
 
-import { InfoCircleIcon, CustomTooltip, Box, CircularProgress,SistentThemeProvider } from "@sistent/sistent";
+import {
+  InfoCircleIcon,
+  CustomTooltip,
+  Box,
+  CircularProgress,
+  SistentThemeProvider,
+} from "@sistent/sistent";
 
 // import KanvasColor from "../../img/SVGs/kanvasColor";
 import KanvasWhite from "../../img/SVGs/kanvasWhite";
@@ -31,6 +37,7 @@ import { randomApplicationNameGenerator } from "../../utils";
 import { getBase64EncodedFile, getUnit8ArrayDecodedFile } from "../utils/file";
 import RecentDesignsCard, { refreshRecentDesignsEvent } from "./RecentDesigns";
 import QanelasSistentThemeProvider from "../../theme/QanelasSistentThemeProvider";
+import { openExternalLink } from "../utils/hooks";
 
 const proxyUrl = "http://127.0.0.1:7877";
 
@@ -94,6 +101,7 @@ const HeaderSection = ({ isDarkTheme }) => (
           window.ddClient.host.openExternal("https://docs.layer5.io/videos/")
         }
       />
+
       <UserAccountSection isDarkTheme={isDarkTheme} />
     </MuiBox>
     <MuiBox display="flex" justifyContent="center" mb={2}>
@@ -120,7 +128,10 @@ const LaunchKanvasSection = ({ isDarkTheme }) => {
 
   return (
     <ExtensionWrapper
-      sx={{ backgroundColor: isDarkTheme ? "#393F49" : "#D7DADE", flexDirection:"column"}}
+      sx={{
+        backgroundColor: isDarkTheme ? "#393F49" : "#D7DADE",
+        flexDirection: "column",
+      }}
     >
       <AccountDiv>
         <StyledButton
@@ -130,10 +141,20 @@ const LaunchKanvasSection = ({ isDarkTheme }) => {
             window.location.href = proxyUrl + "/extension/meshmap";
             setLaunching(true);
           }}
-          sx={{margin:"0"}}
-        > <KanvasWhite height={48} width={48} sx={{margin:"0", padding:"0"}}  />
-
-          <MuiBox display={"flex"} gap={0} sx={{margin:"0", padding:"0"}} alignItems="center">
+          sx={{ margin: "0" }}
+        >
+          {" "}
+          <KanvasWhite
+            height={48}
+            width={48}
+            sx={{ margin: "0", padding: "0" }}
+          />
+          <MuiBox
+            display={"flex"}
+            gap={0}
+            sx={{ margin: "0", padding: "0" }}
+            alignItems="center"
+          >
             {launching && (
               <CircularProgress
                 sx={{
@@ -153,7 +174,7 @@ const LaunchKanvasSection = ({ isDarkTheme }) => {
             cursor: "pointer",
             marginTop: "0.55rem",
             padding: "0px",
-            fontSize: ".9rem"
+            fontSize: ".9rem",
           }}
           onClick={openInExternalWindow}
         >
@@ -200,13 +221,24 @@ const ImportDesignSection = ({ isDarkTheme }) => {
       window.ddClient.desktopUI.toast.error("Error uploading design file.");
     }
   };
-
+  const ImportDesignTooltipTitle = (
+    <Typography variant="body1" component="p" sx={{ mt: 0.5 }}>
+      Supported formats: Helm chart, Kubernetes manifest, Kustomize, and Docker
+      Compose. Learn more at
+      <a
+        onClick={() =>
+          openExternalLink("https://docs.layer5.io/kanvas/getting-started/")
+        }
+        style={{ color: "#00b39f" }}
+      >
+        https://docs.layer5.io/kanvas/getting-started/
+      </a>
+    </Typography>
+  );
   return (
-
     <ExtensionWrapper
       sx={{ backgroundColor: isDarkTheme ? "#393F49" : "#D7DADE" }}
     >
-      
       <AccountDiv>
         <Box
           display="inline"
@@ -215,38 +247,40 @@ const ImportDesignSection = ({ isDarkTheme }) => {
           alignSelf="flex-start"
           margin="-1.5rem 0rem 1rem -.5rem"
         >
-       <CustomTooltip title="Supported formats: Helm chart, Kubernetes manifest, Kustomize, and Docker Compose. Learn more at https://docs.layer5.io/kanvas/getting-started/">
+          <CustomTooltip title={ImportDesignTooltipTitle}>
             <div>
               <InfoCircleIcon height={24} width={24} />
             </div>
           </CustomTooltip>
-          </Box>
+        </Box>
         <Box
           display="flex"
           justifyContent="space-between"
           alignItems="center"
           gap={1}
           mb={2}
         >
-          <Typography variant="h6" whiteSpace="nowrap">Import Design File</Typography>
-         
+          <Typography variant="h6" whiteSpace="nowrap">
+            Import Design File
+          </Typography>
         </Box>
         <label htmlFor="upload-button">
-          <StyledButton variant="contained" component="span" sx={{  padding: "1rem 3.5rem"}}  >
+          <StyledButton
+            variant="contained"
+            component="span"
+            sx={{ padding: "1rem 3.5rem" }}
+          >
             <input
               id="upload-button"
               type="file"
               accept=".yaml, .yml, .json, .zip, .tar , .tar.gz"
               hidden
               onChange={handleImport}
-              
             />
             Browse...
           </StyledButton>
         </label>
-         
       </AccountDiv>
-      
     </ExtensionWrapper>
   );
 };
@@ -271,7 +305,11 @@ const VersionInfoSection = ({ isDarkTheme }) => {
         <VersionText>{kanvasVersion}</VersionText>
       </CustomTooltip>
       <a
-        href={`https://docs.layer5.io/project/releases/${kanvasVersion}`}
+        onClick={() =>
+          openExternalLink(
+            `https://docs.layer5.io/project/releases/${kanvasVersion}`,
+          )
+        }
         target="_blank"
         rel="noreferrer"
         style={{ color: isDarkTheme ? "white" : "black" }}
@@ -366,21 +404,18 @@ export const Dasboard = ({ isDarkMode }) => {
         }}
       >
         <SectionWrapper
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "1.5rem",
-          alignItems: "center",
-        }}
-      >
-        <LaunchKanvasSection isDarkTheme={isDarkTheme} />
-        <ImportDesignSection isDarkTheme={isDarkTheme} />
-      </SectionWrapper>
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "1.5rem",
+            alignItems: "center",
+          }}
+        >
+          <LaunchKanvasSection isDarkTheme={isDarkTheme} />
+          <ImportDesignSection isDarkTheme={isDarkTheme} />
+        </SectionWrapper>
         <RecentDesignsCard isDarkTheme={isDarkMode} />
       </SectionWrapper>
-                    </QanelasSistentThemeProvider>
-
-
-
+    </QanelasSistentThemeProvider>
   );
 };