diff --git a/src/components/onboarding/Accordion.tsx b/src/components/onboarding/Accordion.tsx
index afebb17..32f2b9a 100644
--- a/src/components/onboarding/Accordion.tsx
+++ b/src/components/onboarding/Accordion.tsx
@@ -1,4 +1,5 @@
import React, { useEffect, useState } from "react"
+import CopyToClipboard from "./CopyToClipboard"
import '../../../static/onboardingCss/Accordion.css'
export interface PanelProps {
@@ -19,7 +20,7 @@ function Panel(props: PanelProps){
useEffect(()=>{
window.setTimeout(() => {
- setHeight(500)
+ setHeight(620)
}, 333);
},[])
@@ -36,9 +37,12 @@ function Panel(props: PanelProps){
+
+
+
- { props.content }
+ { props.content }
diff --git a/src/components/onboarding/Checkbox.tsx b/src/components/onboarding/Checkbox.tsx
index 7e4092a..39cb861 100644
--- a/src/components/onboarding/Checkbox.tsx
+++ b/src/components/onboarding/Checkbox.tsx
@@ -21,13 +21,13 @@ export function Checkbox(props:CheckboxProps){
handleCheckboxChange(label);
}
return(
-
-
-
-
+
+
+
+
)
}
@@ -70,9 +70,9 @@ export function ListCheckboxes(props: ListCheckboxesProps){
-
+
diff --git a/src/components/onboarding/Constant.ts b/src/components/onboarding/Constant.ts
index 1621351..2408d99 100644
--- a/src/components/onboarding/Constant.ts
+++ b/src/components/onboarding/Constant.ts
@@ -2,16 +2,16 @@ export const languages : any = [["Go","https://cdn.worldvectorlogo.com/logos/go-
export const frameworks : any = {"Go":["Chi","Gin","Echo","WebGo","Gorilla/MUX","MongoDB","DynamoDB","SQL Driver","net/http","gRPC"]
,"Java":["Spring Boot"]}
-export const details : any = {"Go":{"Chi":'r := chi.NewRouter()\nkchi.ChiV5(k,r)\n\nExample =>\n\nimport("github.com/keploy/go-sdk/integrations/kchi")\n\nr := chi.NewRouter()\nport := "8080"\nk := keploy.New(keploy.Config{\n App: keploy.AppConfig{\n Name: "my_app",\n Port: port,\n },\n Server: keploy.ServerConfig{\n URL: "http://localhost:8081/api",\n },\n })\nkchi.ChiV5(k,r)\nhttp.ListenAndServe(":" + port, r)',
- "Gin":'r:=gin.New()\nkgin.GinV1(k, r)\n\nExample =>\n\nimport("github.com/keploy/go-sdk/integrations/kgin/v1")\n\nr:=gin.New()\nport := "8080"\nk := keploy.New(keploy.Config{\n App: keploy.AppConfig{\n Name: "my_app",\n Port: port,\n },\n Server: keploy.ServerConfig{\n URL: "http://localhost:8081/api",\n },\n})\nkgin.GinV1(k, r)\nr.Run(":" + port)',
- "Echo":'e := echo.New()\nkecho.EchoV4(k, e)\n\nExample =>\n\nimport("github.com/keploy/go-sdk/integrations/kecho/v4")\n\ne := echo.New()\nport := "8080"\nk := keploy.New(keploy.Config{\n App: keploy.AppConfig{\n Name: "my-app",\n Port: port,\n },\n Server: keploy.ServerConfig{\n URL: "http://localhost:8081/api",\n },\n})\nkecho.EchoV4(k, e)\ne.Start(":" + port)',
- "WebGo":'WebGoV4\n\nrouter := webgo.NewRouter(cfg, getRoutes())\nkwebgo.WebGoV4(k, router)\n\nWebGoV6\n\nkwebgo.WebGoV6(k, router)\nrouter.Start()\n\nExample =>\n\nimport("github.com/keploy/go-sdk/integrations/kwebgo/v4")\n\nport := "8080"\nk := keploy.New(keploy.Config{\n App: keploy.AppConfig{\n Name: "my-app",\n Port: port,\n },\n Server: keploy.ServerConfig{\n URL: "http://localhost:8081/api",\n },\n})\n\nkwebgo.WebGoV4(k\n\n, router)\nrouter.Start()',
- "Gorilla/MUX":'r := mux.NewRouter()\nkmux.Mux(k, r)\n\nExample =>\n\nimport(\n "github.com/keploy/go-sdk/integrations/kmux"\n "net/http"\n)\n\nr := mux.NewRouter()\nport := "8080"\nk := keploy.New(keploy.Config{\n App: keploy.AppConfig{\n Name: "my-app",\n Port: port,\n },\n Server: keploy.ServerConfig{\n URL: "http://localhost:8081/api",\n },\n})\nkmux.Mux(k, r)\nhttp.ListenAndServe(":"+port, r)',
- "MongoDB":'import("github.com/keploy/go-sdk/integrations/kmongo")\n\ndb := client.Database("testDB")\ncol := kmongo.NewCollection(db.Collection("Demo-Collection"))\n\nFollowing operations are supported:\n\nFindOne - Err and Decode method of mongo.SingleResult\nFind - Next, TryNext, Err, Close, All and Decode methods of mongo.cursor\nInsertOne\nInsertMany\nUpdateOne\nUpdateMany\nDeleteOne\nDeleteMany\nCountDocuments\nDistinct\nAggregate - Next, TryNext, Err, Close, All and Decode methods of mongo.cursor',
- "DynamoDB":'import("github.com/keploy/go-sdk/integrations/kddb")\n\nclient := kddb.NewDynamoDB(dynamodb.New(sess))\n\n\nFollowing operations are supported:\n\nQueryWithContext\nGetItemWithContext\nPutItemWithContext'
- ,"SQL Driver":'import(\n "github.com/keploy/go-sdk/integrations/ksql"\n "github.com/lib/pq"\n)\n\nfunc init(){\n driver := ksql.Driver{Driver: pq.Driver{}}\n sql.Register("keploy", &driver)\n}\n\n',
- "net/http":'khttpclient.NewHttpClient(&http.Client{})\n\nExample =>\n\nimport("github.com/keploy/go-sdk/integrations/khttpclient")\n\nfunc(w http.ResponseWriter, r *http.Request){\n client := khttpclient.NewHttpClient(&http.Client{})\n// ensure to add request context to all outgoing http requests\n client.SetCtxHttpClient(r.Context())\n resp, err := client.Get("https://example.com")\n}\n\nNote: ensure to add pass request context to all external \nrequests like http requests, db calls, etc.',
- "gRPC":'conn, err := grpc.Dial(address, grpc.WithInsecure(), kgrpc.WithClientUnaryInterceptor(k))\n\nExample =>\n\nimport("github.com/keploy/go-sdk/integrations/kgrpc")\n\nport := "8080"\nk := keploy.New(keploy.Config{\n App: keploy.AppConfig{\n Name: "my-app",\n Port: port,\n },\n Server: keploy.ServerConfig{\n URL: "http://localhost:8081/api",\n },\n})\n\nconn, err := grpc.Dial(address, grpc.WithInsecure(), kgrpc.WithClientUnaryInterceptor(k))\n\nNote: Currently streaming is not yet supported.'},
+export const details : any = {"Go":{"Chi":'\n\nr := chi.NewRouter()\nkchi.ChiV5(k,r)\n\n// Example \n\nimport("github.com/keploy/go-sdk/integrations/kchi")\n\nr := chi.NewRouter()\nport := "8080"\nk := keploy.New(keploy.Config{\n App: keploy.AppConfig{\n Name: "my_app",\n\ Port: port,\n },\n Server: keploy.ServerConfig{\n URL: "http://localhost:8081/api",\n },\n })\n\nkchi.ChiV5(k,r)\nhttp.ListenAndServe(":" + port, r)',
+ "Gin":'\n\nr:=gin.New()\nkgin.GinV1(k, r)\n\n// Example \n\nimport("github.com/keploy/go-sdk/integrations/kgin/v1")\n\nr:=gin.New()\nport := "8080"\nk := keploy.New(keploy.Config{\n App: keploy.AppConfig{\n Name: "my_app",\n Port: port,\n },\n Server: keploy.ServerConfig{\n URL: "http://localhost:8081/api",\n },\n})\nkgin.GinV1(k, r)\nr.Run(":" + port)',
+ "Echo":'\n\ne := echo.New()\nkecho.EchoV4(k, e)\n\n// Example\n\nimport("github.com/keploy/go-sdk/integrations/kecho/v4")\n\ne := echo.New()\nport := "8080"\nk := keploy.New(keploy.Config{\n App: keploy.AppConfig{\n Name: "my-app",\n Port: port,\n },\n Server: keploy.ServerConfig{\n URL: "http://localhost:8081/api",\n },\n})\nkecho.EchoV4(k, e)\ne.Start(":" + port)',
+ "WebGo":'// WebGoV4\n\nrouter := webgo.NewRouter(cfg, getRoutes())\nkwebgo.WebGoV4(k, router)\n\n// WebGoV6\n\nkwebgo.WebGoV6(k, router)\nrouter.Start()\n\n// Example\n\nimport("github.com/keploy/go-sdk/integrations/kwebgo/v4")\n\nport := "8080"\nk := keploy.New(keploy.Config{\n App: keploy.AppConfig{\n Name: "my-app",\n Port: port,\n },\n Server: keploy.ServerConfig{\n URL: "http://localhost:8081/api",\n },\n})\n\nkwebgo.WebGoV4(k,router)\nrouter.Start()',
+ "Gorilla/MUX":'\n\nr := mux.NewRouter()\nkmux.Mux(k, r)\n\n// Example \n\nimport(\n "github.com/keploy/go-sdk/integrations/kmux"\n "net/http"\n)\n\nr := mux.NewRouter()\nport := "8080"\nk := keploy.New(keploy.Config{\n App: keploy.AppConfig{\n Name: "my-app",\n Port: port,\n },\n Server: keploy.ServerConfig{\n URL: "http://localhost:8081/api",\n },\n})\nkmux.Mux(k, r)\nhttp.ListenAndServe(":"+port, r)',
+ "MongoDB":'\n\nimport("github.com/keploy/go-sdk/integrations/kmongo")\n\ndb := client.Database("testDB")\ncol := kmongo.NewCollection(db.Collection("Demo-Collection"))\n\n// Following operations are supported:\n\n// FindOne - Err and Decode method of mongo.SingleResult\n// Find - Next, TryNext, Err, Close, All and Decode methods of mongo.cursor\n// InsertOne\n// InsertMany\n// UpdateOne\n// UpdateMany\n// DeleteOne\n// DeleteMany\n// CountDocuments\n// Distinct\n// Aggregate - Next, TryNext, Err, Close, All and Decode methods of mongo.cursor',
+ "DynamoDB":'\n\nimport("github.com/keploy/go-sdk/integrations/kddb")\n\nclient := kddb.NewDynamoDB(dynamodb.New(sess))\n\n\n// Following operations are supported:\n\n// QueryWithContext\n// GetItemWithContext\n// PutItemWithContext'
+ ,"SQL Driver":'\n\nimport(\n "github.com/keploy/go-sdk/integrations/ksql"\n "github.com/lib/pq"\n)\n\nfunc init(){\n driver := ksql.Driver{Driver: pq.Driver{}}\n sql.Register("keploy", &driver)\n}\n\n',
+ "net/http":'\n\nkhttpclient.NewHttpClient(&http.Client{})\n\n// Example \n\nimport("github.com/keploy/go-sdk/integrations/khttpclient")\n\nfunc(w http.ResponseWriter, r *http.Request){\n client := khttpclient.NewHttpClient(&http.Client{})\n// ensure to add request context to all outgoing http requests\n client.SetCtxHttpClient(r.Context())\n resp, err := client.Get("https://example.com")\n}\n\n// Note: ensure to add pass request context to all external \nrequests like http requests, db calls, etc.',
+ "gRPC":'\n\nconn, err := grpc.Dial(address, grpc.WithInsecure(), kgrpc.WithClientUnaryInterceptor(k))\n\n// Example \n\nimport("github.com/keploy/go-sdk/integrations/kgrpc")\n\nport := "8080"\nk := keploy.New(keploy.Config{\n App: keploy.AppConfig{\n Name: "my-app",\n Port: port,\n },\n Server: keploy.ServerConfig{\n URL: "http://localhost:8081/api",\n },\n})\n\nconn, err := grpc.Dial(address, grpc.WithInsecure(), kgrpc.WithClientUnaryInterceptor(k))\n\n// Note: Currently streaming is not yet supported.'},
"Java":{"Spring Boot":'package com.example.demo;\n\nimport org.springframework.boot.SpringApplication;\nimport org.springframework.boot.autoconfigure.SpringBootApplication;\n\n@SpringBootApplication(scanBasePackages = {"com.example.demo", "io.keploy.servlet"})\npublic class SamplesJavaApplication {\n public static void main(String[] args) {\n SpringApplication.run(SamplesJavaApplication.class, args);\n }\n}'}}
export const images : any = {"Go":"https://cdn.worldvectorlogo.com/logos/go-logo-1.svg",
diff --git a/src/components/onboarding/CopyToClipboard.tsx b/src/components/onboarding/CopyToClipboard.tsx
new file mode 100644
index 0000000..e3321d9
--- /dev/null
+++ b/src/components/onboarding/CopyToClipboard.tsx
@@ -0,0 +1,27 @@
+import { Button, Snackbar } from '@mui/material'
+import { useState} from 'react'
+import React from 'react'
+
+export interface CopyToClipboardProps {
+ data: string
+}
+
+function CopyToClipboard(props:CopyToClipboardProps){
+ const [open, setOpen] = useState(false)
+ const handleClick = () => {
+ setOpen(true)
+ navigator.clipboard.writeText(props.data)
+ }
+ return (
+
+
+ setOpen(false)}
+ autoHideDuration={2000}
+ message="Copied To Clipboard"
+ />
+
+ )
+}
+export default CopyToClipboard
\ No newline at end of file
diff --git a/src/components/onboarding/Documentation.tsx b/src/components/onboarding/Documentation.tsx
new file mode 100644
index 0000000..7d92cb9
--- /dev/null
+++ b/src/components/onboarding/Documentation.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import '../../../static/onboardingCss/Documentation.css'
+
+export default function Documentation(){
+ return(
+
+

+
+
+
Installation
+
+
+
Start Keploy Server
+
+
+
+ git clone https://github.com/keploy/keploy.git && cd keploy
+
+ docker-compose up
+
+
+
The UI can be accessed at http://localhost:8081
+
+
Helm Chart
+
Keploy can also be installed to your Kubernetes cluster using the Helm chart available here
+
+
+
Run Sample application
+
+
+
Demos using Echo/PostgreSQL and Gin/MongoDB are available here. For this example, we will use the Echo/PostgreSQL sample.
+
+
+ git clone https://github.com/keploy/samples-go && cd samples-go/echo-sql
+
+ go mod download
+
+
+
+
Start PostgreSQL instance
+
+
+ docker-compose up -d
+
+
+
+
Run the application
+
+
+ go run handler.go main.go
+
+
+
+
+
+
Generate testcases
+
+
+

+
+
+
To genereate testcases we just need to make some API calls. You can use Postman,Hoppscotch, or simply curl
+
+
1. Generate shortned url
+
+
+
+ {`curl --request POST`} \{`\n`}
+ {`--url http://localhost:8080/url`} \{`\n`}
+ {`--header 'content-type: application/json'`} \{`\n`}
+ {`--data `}'{`{\n`}
+ {` `}"url :" "https://github.com"{`\n`}
+ {`}`}'
+
+
+
+
2. Redirect to original url from shortened url
+
+
+
+ {`curl --request GET`} \{`\n`}
+ {` `}--url http://localhost:8080/GuwHCgoQ
+
+
+
+
+
+
Integration with native Go test framework
+
+
+

+
+
+
You just need 3 lines of code in your unit test file and that's it!!🔥🔥🔥
+
+
+
+ {`import (\n`}
+ {` `}{`github.com/keploy/go-sdk/keploy\n`}
+ {` `}{`testing\n`}
+ {`)\n`}
+ {`func TestKeploy(t *testing.T) {\n`}
+ {` `}{`keploy.SetTestMode()\n`}
+ {` `}{`go main()\n`}
+ {` `}{`keploy.AssertTests(t)\n`}
+ {`}`}
+
+
+
+
Run the testcases
+
+
Note: Before running tests stop the sample application
+
+
+
+ go test -coverpkg=./... -covermode=atomic ./...
+
+
+
+
this should show you have 74.4% coverage without writing any code!
+
+
+
+ ok echo-psql-url-shortener 5.820s coverage: 74.4% of statements in ./...
+
+
+
+
All of these can be visualised here - http://localhost:8081/testlist
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/onboarding/Onboard.tsx b/src/components/onboarding/Onboard.tsx
index a89fa6b..9757a52 100644
--- a/src/components/onboarding/Onboard.tsx
+++ b/src/components/onboarding/Onboard.tsx
@@ -1,4 +1,5 @@
import React, { useState }from 'react';
+import Documentation from './Documentation';
import { Accordion } from './Accordion';
import {languages,frameworks,details,images,issueLink} from './Constant';
import Empty from '../global/empty';
@@ -7,6 +8,7 @@ import { ListFrameworks,ListLangs } from "./OnboardUtils";
export default function Onboard(){
const [language, setLang] = useState("None");
const [options, setOptions] = useState([]);
+ const [showPage, setShowPage] = useState(false);
if(language === "None"){
return(
@@ -35,15 +37,29 @@ export default function Onboard(){
)
}
+ if(showPage === true){
+ return(
+
+ )
+ }
let panels : any[] = [];
options.forEach((i) => {
panels.push({label:i,content:details[language][i]})
@@ -54,9 +70,14 @@ export default function Onboard(){
-
+
+
+
+
)
}
\ No newline at end of file
diff --git a/static/onboardingCss/Accordion.css b/static/onboardingCss/Accordion.css
index 2c17026..f9006e0 100644
--- a/static/onboardingCss/Accordion.css
+++ b/static/onboardingCss/Accordion.css
@@ -6,7 +6,7 @@
.accordion {
width: 100%;
- max-width: 700px;
+ max-width: 500px;
}
.panel {
/* background-color: black; */
@@ -70,3 +70,7 @@
.panel:not(:last-child) {
margin-bottom: 3px;
}
+
+.clipboard{
+ margin-right: -80%;
+}
diff --git a/static/onboardingCss/App.css b/static/onboardingCss/App.css
index 1880a09..b9828cb 100644
--- a/static/onboardingCss/App.css
+++ b/static/onboardingCss/App.css
@@ -87,4 +87,17 @@
.framework{
/* position:static */
padding-bottom: 7rem;
+}
+
+.alignCenter{
+ text-align: center;
+ justify-content: center;
+ display: flex;
+ gap: 18px;
+}
+
+.documentation{
+ text-align: left;
+ margin-left: 155px;
+ margin-top: 45px;
}
\ No newline at end of file
diff --git a/static/onboardingCss/Checkbox.css b/static/onboardingCss/Checkbox.css
index 886e925..1470d7d 100644
--- a/static/onboardingCss/Checkbox.css
+++ b/static/onboardingCss/Checkbox.css
@@ -1,12 +1,12 @@
.chb-onboard {
visibility: hidden;
/* align-items:unset; */
- margin-left: -40px;
+ margin-left: -60px;
}
.chb-onboard + label {
position: absolute;
- padding-left: 5px;
+ padding-left: 17px;
}
.chb-3-onboard + label::before {
@@ -48,4 +48,8 @@
justify-content: center;
box-sizing: border-box;
}
+
+ .largeFont{
+ font-size:large;
+ }
\ No newline at end of file
diff --git a/static/onboardingCss/Documentation.css b/static/onboardingCss/Documentation.css
new file mode 100644
index 0000000..5306768
--- /dev/null
+++ b/static/onboardingCss/Documentation.css
@@ -0,0 +1,29 @@
+code {
+ display: block;
+ text-align: left;
+ white-space: pre;
+ position: relative;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 2;
+ background-color: #e8e8e8;
+ /* margin: 10px; */
+ border-radius: 5px;
+}
+
+.codeContent{
+ margin-left: 10px;
+}
+
+.docImg{
+ width: 50%;
+ margin-left: 90px;
+}
+
+.logoImg{
+ width: 25%;
+}
+
+.ident{
+ margin-left: 30px;
+}
\ No newline at end of file