feat(ui): add copy to clipboard feature and installation guide

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){
             <div className='panel__inner'
                 style={ innerStyle }
                 aria-hidden={ !isActive }>
+                <div className="clipboard">
+                    <CopyToClipboard data={props.content}/>
+                </div>
                 <p className='panel__content'>
                     <pre>
-                    { props.content }
+                        { props.content }
                     </pre>
                 </p>
             </div>

src/components/onboarding/Checkbox.tsx

@@ -21,13 +21,13 @@ export function Checkbox(props:CheckboxProps){
         handleCheckboxChange(label);
       }
     return(
-            <div >
-                <input value={props.label}
-                        checked={isChecked}
-                        onChange={toggleCheckboxChange}
-                        type="checkbox" className="chb-onboard chb-3-onboard" id={props.label} />
-                <label htmlFor={props.label}>{props.label}</label>
-                <hr/>
+            <div className="largeFont">
+
+                    <input value={props.label}
+                            checked={isChecked}
+                            onChange={toggleCheckboxChange}
+                            type="checkbox" className="chb-onboard chb-3-onboard" id={props.label} />
+                    <label className="listFrameworks" htmlFor={props.label}>{props.label}</label>
             </div>
     )
 }
@@ -70,9 +70,9 @@ export function ListCheckboxes(props: ListCheckboxesProps){
                 <br/>
                 <div className="flex-2-onboard">
                     <form onSubmit={formSubmitEvent => {formSubmitEvent.preventDefault(); props.setLang("None");}}>
-                        <button className="btn-onboard btn-primary-onboard btn-round-1-onboard" type="submit">Previous</button>
+                        <button className="btn-onboard btn-primary-onboard btn-round-1-onboard largeFont" type="submit">Previous</button>
                     </form>
-                    <button className="btn-onboard btn-primary-onboard btn-round-1-onboard" type="submit">Next</button>
+                    <button className="btn-onboard btn-primary-onboard btn-round-1-onboard largeFont" type="submit">Next</button>
                 </div>
             </form>
         </div>

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",

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 (
+        <div>
+            <Button onClick={handleClick}>Copy</Button>
+            <Snackbar
+                open={open}
+                onClose={() => setOpen(false)}
+                autoHideDuration={2000}
+                message="Copied To Clipboard"
+            />
+        </div>
+    )
+}
+export default CopyToClipboard

src/components/onboarding/Documentation.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import '../../../static/onboardingCss/Documentation.css'
+
+export default function Documentation(){
+    return(
+        <div>
+            <img src="https://docs.keploy.io/img/keploy-logo-dark.svg" alt="Keploy Logo" className='logoImg'/>
+            <br />
+            <br />
+            <h2>Installation</h2>
+            <br />
+            <div className='ident'>
+                <h4>Start Keploy Server</h4>
+                <br />
+                <code style={{width:'50%'}}>
+                    <div className='codeContent'>
+                        git clone https://github.com/keploy/keploy.git && cd keploy
+                        <br />
+                        docker-compose up
+                    </div>
+                </code>
+                <p>The UI can be accessed at <a href={"http://localhost:8081"}>http://localhost:8081</a></p>
+            <br />
+            <h4>Helm Chart</h4>
+            <p>Keploy can also be installed to your Kubernetes cluster using the Helm chart available <a href={"https://github.com/keploy/keploy/tree/main/deployment/keploy"}>here</a></p>
+            <br />
+            </div>
+            <h2>Run Sample application</h2>
+            <div className='ident'>
+                <br />
+                <p>Demos using Echo/PostgreSQL and Gin/MongoDB are available <a href={"https://github.com/keploy/samples-go"}>here</a>. For this example, we will use the Echo/PostgreSQL sample.</p>
+                <code style={{width:'60%'}}>
+                    <div className='codeContent'>
+                        git clone https://github.com/keploy/samples-go && cd samples-go/echo-sql
+                        <br/>
+                        go mod download
+                    </div>
+                </code>
+                <br />
+                <h5>Start PostgreSQL instance</h5>
+                <code style={{width:'20%'}}>
+                    <div className='codeContent'>
+                        docker-compose up -d
+                    </div>
+                </code>
+                <br />
+                <h5>Run the application</h5>
+                <code style={{width:'25%'}}>
+                    <div className='codeContent'>
+                        go run handler.go main.go
+                    </div>
+                </code>
+                <br />
+            </div>
+            <br />
+            <h2>Generate testcases</h2>
+            <div className='ident'>
+                <br />
+                <img src="https://github.com/keploy/docs/raw/main/static/gif/record-testcase.gif?raw=true" alt="Testcase Gif" className='docImg'/>
+                <br />
+                <br />
+                <p>To genereate testcases we just need to make some API calls. You can use <a href={"https://www.postman.com/"}>Postman</a>,<a href={"https://hoppscotch.io/"}>Hoppscotch</a>, or simply curl</p>
+                <br />
+                <h5>1. Generate shortned url</h5>
+                <br />
+                <code style={{width:'35%'}}>
+                    <div className='codeContent'>
+                        {`curl --request POST`} \{`\n`}
+                        {`--url http://localhost:8080/url`} \{`\n`}
+                        {`--header 'content-type: application/json'`} \{`\n`}
+                        {`--data `}'{`{\n`}
+                        {`   `}"url :" "https://github.com"{`\n`}
+                        {`}`}'
+                    </div>
+                </code>
+                <br />
+                <h5>2. Redirect to original url from shortened url</h5>
+                <br />
+                <code style={{width:'35%'}}>
+                    <div className='codeContent'>
+                        {`curl --request GET`} \{`\n`}
+                        {`   `}--url http://localhost:8080/GuwHCgoQ
+                    </div>
+                </code>
+                <br />
+            </div>
+            <br />
+            <h2>Integration with native Go test framework</h2>
+            <div className='ident'>
+                <br />
+                <img src="https://github.com/keploy/docs/raw/main/static/gif/unit-test.gif?raw=true" alt="Test Integration Gif" className='docImg'/>
+                <br />
+                <br />
+                <p>You just need 3 lines of code in your unit test file and that's it!!🔥🔥🔥</p>
+                <br />
+                <code style={{width:'40%'}}>
+                    <div className='codeContent'>
+                        {`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`}
+                        {`}`}
+                    </div>
+                </code>
+                <br />
+                <h4>Run the testcases</h4>
+                <br />
+                <p>Note: Before running tests stop the sample application</p>
+                <br />
+                <code style={{width:'45%'}}>
+                    <div className='codeContent'>
+                        go test -coverpkg=./... -covermode=atomic  ./...
+                    </div>
+                </code>
+                <br />
+                <p>this should show you have 74.4% coverage without writing any code!</p>
+                <br />
+                <code style={{width:'60%'}}>
+                    <div className='codeContent'>
+                        ok      echo-psql-url-shortener 5.820s  coverage: 74.4% of statements in ./...
+                    </div>
+                </code>
+                <br />
+                <p>All of these can be visualised here - <a href={"http://localhost:8081/testlist"}>http://localhost:8081/testlist</a></p>
+            </div>
+        </div>
+    )
+}