From 85714353f7f13cbea614fb1b499c144b1874077d Mon Sep 17 00:00:00 2001 From: Giuseppe Scuglia Date: Sun, 15 Dec 2024 20:03:00 +0100 Subject: [PATCH] fix: dashboard table cell width (#4) * fix chat breadcrumb * add breadcrumb to certificate and help pages * fix table cell width * fix conflicts --- src/components/CertificateSecurity.tsx | 204 ++++++++++----- src/components/Certificates.tsx | 334 ++++++++++++++----------- src/components/Chat.tsx | 8 +- src/components/Dashboard.tsx | 6 +- src/components/Help.tsx | 63 +++-- 5 files changed, 385 insertions(+), 230 deletions(-) diff --git a/src/components/CertificateSecurity.tsx b/src/components/CertificateSecurity.tsx index 8f79be0..ac5eb74 100644 --- a/src/components/CertificateSecurity.tsx +++ b/src/components/CertificateSecurity.tsx @@ -1,3 +1,11 @@ +import { Link } from "react-router-dom"; +import { + Breadcrumb, + BreadcrumbList, + BreadcrumbItem, + BreadcrumbSeparator, + BreadcrumbPage, +} from "./ui/breadcrumb"; import { Card } from "./ui/card"; const SecurityShieldIcon = () => ( @@ -59,76 +67,148 @@ const OpenSourceIcon = () => ( export function CertificateSecurity() { return ( -
-

Certificate Security

+ <> +
+ + + + Dashboard + + + + + Certificate Security + + + + +
+
+

Certificate Security

- -
- -
-

Robust Certificate Security

-

- Security is a top priority for us. We have designed CodeGates local certificate management with security in mind, balanced against ease of use. -

-

We will always seek to improve and balance security, privacy and usability as best as we can

- - - -
- -
-

Key Security Features

-
-
-

Per-Domain Certificate Generation

-

- Instead of using wildcard certificates, CodeGate generates unique certificates for each domain. This approach minimizes security risks by limiting the impact of any single certificate compromise. -

+ +
+
+

+ Robust Certificate Security +

+

+ Security is a top priority for us. We have designed CodeGates local + certificate management with security in mind, balanced against ease + of use. +

+

+ We will always seek to improve and balance security, privacy and + usability as best as we can +

+ -
-

High-Strength Encryption with 4096-bit RSA Keys

-

- CodeGate utilizes 4096-bit RSA keys for Certificate Authority operations, providing enhanced security compared to the standard 2048-bit keys. The increased key length significantly reduces the risk of brute-force attacks, ensuring long-term protection for your data. We use 2048 for the server certs to balance in performance. -

+ +
+
+

Key Security Features

+
+
+

+ Per-Domain Certificate Generation +

+

+ Instead of using wildcard certificates, CodeGate generates + unique certificates for each domain. This approach minimizes + security risks by limiting the impact of any single certificate + compromise. +

+
-
-

Secure SSL/TLS Configuration

-

- Our SSL context is configured to enforce the latest security standards, including strong cipher suites and disabling outdated protocols. This ensures secure and efficient encrypted communications. -

+
+

+ High-Strength Encryption with 4096-bit RSA Keys +

+

+ CodeGate utilizes 4096-bit RSA keys for Certificate Authority + operations, providing enhanced security compared to the standard + 2048-bit keys. The increased key length significantly reduces + the risk of brute-force attacks, ensuring long-term protection + for your data. We use 2048 for the server certs to balance in + performance. +

+
+ +
+

+ Secure SSL/TLS Configuration +

+

+ Our SSL context is configured to enforce the latest security + standards, including strong cipher suites and disabling outdated + protocols. This ensures secure and efficient encrypted + communications. +

+
+ +
+

+ Certificate Caching and Management +

+

+ Certificates are cached efficiently to optimize performance + without compromising security. Additionally, mechanisms are in + place to manage certificate lifecycles and prevent resource + exhaustion. +

+
+ -
-

Certificate Caching and Management

-

- Certificates are cached efficiently to optimize performance without compromising security. Additionally, mechanisms are in place to manage certificate lifecycles and prevent resource exhaustion. + +

+ +
+

+ Open Source and Community Engagement +

+
+

+ Security has been a fundamental consideration throughout the + development of CodeGate. Our comprehensive approach ensures that + your development environment remains secure without sacrificing + functionality or performance. +

+

+ We believe in transparency and continuous improvement. By making + our code open source, we invite the global security community to + review, audit, and contribute to enhancing our security measures. +

+

+ If you discover a security vulnerability or have suggestions for + improvement, please reach out to us at{" "} + + security@stacklok.com + + . Your contributions help us maintain the highest security + standards. +

+

+ Explore our codebase on{" "} + + GitHub + {" "} + and join our community in making CodeGate secure and reliable for + everyone.

-
- - - -
- -
-

Open Source and Community Engagement

-
-

- Security has been a fundamental consideration throughout the development of CodeGate. Our comprehensive approach ensures that your development environment remains secure without sacrificing functionality or performance. -

-

- We believe in transparency and continuous improvement. By making our code open source, we invite the global security community to review, audit, and contribute to enhancing our security measures. -

-

- If you discover a security vulnerability or have suggestions for improvement, please reach out to us at security@stacklok.com. Your contributions help us maintain the highest security standards. -

-

- Explore our codebase on GitHub and join our community in making CodeGate secure and reliable for everyone. -

-
- -
+ +
+ ); } diff --git a/src/components/Certificates.tsx b/src/components/Certificates.tsx index ea8307a..95f7db6 100644 --- a/src/components/Certificates.tsx +++ b/src/components/Certificates.tsx @@ -2,16 +2,26 @@ import { Button } from "./ui/button"; import { Card } from "./ui/card"; import { Link } from "react-router-dom"; import { useState, ReactNode } from "react"; +import { + Breadcrumb, + BreadcrumbList, + BreadcrumbItem, + BreadcrumbSeparator, + BreadcrumbPage, +} from "./ui/breadcrumb"; -type OS = 'macos' | 'windows' | 'linux'; -type Action = 'install' | 'remove'; +type OS = "macos" | "windows" | "linux"; +type Action = "install" | "remove"; function renderWithCode(text: string): ReactNode { const parts = text.split(/(`[^`]+`)/); return parts.map((part, index) => { - if (part.startsWith('`') && part.endsWith('`')) { + if (part.startsWith("`") && part.endsWith("`")) { return ( - + {part.slice(1, -1)} ); @@ -71,13 +81,13 @@ const ArrowIcon = () => ( ); export function Certificates() { - const [activeOS, setActiveOS] = useState('macos'); - const [activeAction, setActiveAction] = useState('install'); + const [activeOS, setActiveOS] = useState("macos"); + const [activeAction, setActiveAction] = useState("install"); const handleDownload = () => { - const link = document.createElement('a'); - link.href = '/certificates/codegate_ca.crt'; - link.download = 'codegate.crt'; + const link = document.createElement("a"); + link.href = "/certificates/codegate_ca.crt"; + link.download = "codegate.crt"; document.body.appendChild(link); link.click(); document.body.removeChild(link); @@ -90,177 +100,213 @@ export function Certificates() { "Keychain Access will open automatically", "Add the certificate to the System keychain", "Double-click the imported certificate", - "Expand the \"Trust\" section", - "Set \"When using this certificate\" to \"Custom Settings\"", - "Set \"Secure Sockets Layer\" to \"Always Trust\"", - "Set \"X.509 Basic Policy\" to \"Always Trust\"", + 'Expand the "Trust" section', + 'Set "When using this certificate" to "Custom Settings"', + 'Set "Secure Sockets Layer" to "Always Trust"', + 'Set "X.509 Basic Policy" to "Always Trust"', "Alternatively, you can run `sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain codegate_ca.crt`", ], remove: [ "Open Keychain Access", "Select the System keychain", "Find the CodeGate certificate", - "Right-click and select \"Delete\"", - "Confirm the deletion when prompted" - ] + 'Right-click and select "Delete"', + "Confirm the deletion when prompted", + ], }, windows: { install: [ "Double-click the downloaded certificate file", - "Click \"Install Certificate\"", - "Select \"Local Machine\" and click Next", - "Choose \"Place all certificates in the following store\"", - "Click \"Browse\" and select \"Trusted Root Certification Authorities\"", - "Click \"Next\" and then \"Finish\"" + 'Click "Install Certificate"', + 'Select "Local Machine" and click Next', + 'Choose "Place all certificates in the following store"', + 'Click "Browse" and select "Trusted Root Certification Authorities"', + 'Click "Next" and then "Finish"', ], remove: [ - "Open \"Run\" (Windows + R)", + 'Open "Run" (Windows + R)', "Type `certmgr.msc` and press Enter", - "Navigate to \"Trusted Root Certification Authorities\" → \"Certificates\"", + 'Navigate to "Trusted Root Certification Authorities" → "Certificates"', "Find the CodeGate certificate", - "Right-click and select \"Delete\"", - "Confirm the deletion when prompted" - ] + 'Right-click and select "Delete"', + "Confirm the deletion when prompted", + ], }, linux: { install: [ "Copy the certificate to `/usr/local/share/ca-certificates/`", "Rename it to have a `.crt` extension", "Run: `sudo update-ca-certificates`", - "Restart your browser" + "Restart your browser", ], remove: [ "Remove the certificate from `/usr/local/share/ca-certificates/`", "Run: `sudo update-ca-certificates --fresh`", - "Restart your browser" - ] - } + "Restart your browser", + ], + }, }; const currentSteps = steps[activeOS][activeAction]; return ( -
-

Certificates

- - -
-
- -
-
-

CodeGate SSL Certificate

-

- This certificate allows CodeGate to act as a proxy for certain software such as CoPilot. -

- + <> +
+ + + + Dashboard + + + + + Certificate Download + + + + +
+ +
+

Certificates

+ + +
+
+ +
+
+

+ CodeGate SSL Certificate +

+

+ This certificate allows CodeGate to act as a proxy for certain + software such as CoPilot. +

+ +
-
- + + + +

+ Is this certificate safe to install on my machine? +

+
+
+ +

+ Local Only: CodeGate runs entirely on your + machine within an isolated container, ensuring all data + processing stays local without any external transmissions. +

+
+ +
+ +

+ Secure Certificate Handling: This custom CA is + locally generated and managed, the developers of CodeGate have + no access to it. +

+
- -

Is this certificate safe to install on my machine?

-
-
- -

Local Only: CodeGate runs entirely on your machine within an isolated container, ensuring all data processing stays local without any external transmissions.

+
+ +

+ No External Communications: CodeGate is + designed with no capability to call home or communicate with + external servers, outside of those requested by the IDE or + Agent. +

+
- -
- -

Secure Certificate Handling: This custom CA is locally generated and managed, the developers of CodeGate have no access to it.

+
+ + Learn More + +
- -
- -

No External Communications: CodeGate is designed with no capability to call home or communicate with external servers, outside of those requested by the IDE or Agent.

+ + + +

Certificate Management

+ + {/* OS Selection Tabs */} +
+ + +
-
-
- - Learn More - - -
- - -

Certificate Management

- - {/* OS Selection Tabs */} -
- - - -
+ {/* Action Selection Tabs */} +
+ + +
- {/* Action Selection Tabs */} -
- - -
- -
-
- {currentSteps.map((step, index) => ( - - ))} +
+
+ {currentSteps.map((step, index) => ( + + ))} +
-
- -
+ +
+ ); } diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx index ce74bf2..b02aace 100644 --- a/src/components/Chat.tsx +++ b/src/components/Chat.tsx @@ -33,7 +33,9 @@ export function Chat() { - {extractTitleFromMessage(title)} + + {extractTitleFromMessage(title)} + @@ -45,14 +47,14 @@ export function Chat() { - {question.message} + {question?.message} - {answer.message} + {answer?.message}
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx index 8d5ae6b..60e6c97 100644 --- a/src/components/Dashboard.tsx +++ b/src/components/Dashboard.tsx @@ -30,7 +30,7 @@ const wrapObjectOutput = (input: string | MaliciousPkgType | null) => { if (typeof input === "object" && input !== null) { if (!input.type || !input.name) return null; return ( -
+
  ( {alert.trigger_type} - + {wrapObjectOutput(alert.trigger_string)} {alert.code_snippet?.filepath || "N/A"} - + {alert.code_snippet?.code ? ( 
                       {alert.code_snippet.code}
diff --git a/src/components/Help.tsx b/src/components/Help.tsx
index ec7f980..c5fbca0 100644
--- a/src/components/Help.tsx
+++ b/src/components/Help.tsx
@@ -1,35 +1,44 @@
-import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { Markdown } from './Markdown';
-import Prism from 'prismjs';
-import 'prismjs/themes/prism-tomorrow.css';
-import 'prismjs/components/prism-bash';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-json';
-import 'prismjs/components/prism-yaml';
+import { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { Markdown } from "./Markdown";
+import Prism from "prismjs";
+import "prismjs/themes/prism-tomorrow.css";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-yaml";
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbSeparator,
+  BreadcrumbPage,
+} from "./ui/breadcrumb";
 
 export function Help() {
   const { section } = useParams();
-  const [content, setContent] = useState('');
+  const [content, setContent] = useState("");
 
   useEffect(() => {
     const fetchContent = async () => {
       try {
         const response = await fetch(`/help/${section}.md`);
         if (!response.ok) {
-          throw new Error('Failed to load content');
+          throw new Error("Failed to load content");
         }
         const text = await response.text();
         setContent(text);
-        
+
         // Allow content to render before highlighting
         setTimeout(() => {
           Prism.highlightAll();
         }, 0);
       } catch (error) {
-        console.error('Error loading help content:', error);
-        setContent('# Error\nFailed to load help content. Please try again later.');
+        console.error("Error loading help content:", error);
+        setContent(
+          "# Error\nFailed to load help content. Please try again later."
+        );
       }
     };
 
@@ -37,8 +46,26 @@ export function Help() {
   }, [section]);
 
   return (
-    

-      

+      

+        
+          
+            
+              Dashboard
+            
+            
+            
+              
+                {section === "copilot-setup"
+                  ? "CoPilot Setup"
+                  : "Continue Setup"}
+              
+            
+          
+        
+      

+
+      

-