enhancement: 1. update integration dashboard ux 2. add dotenv example…

… for js sdk (#290)
revertinc · Oct 9, 2023 · 81d6f05 · 81d6f05 · vercel · Oct 9, 2023
1 parent 71ef132
commit 81d6f05
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 12 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -23,6 +23,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-flow-renderer": "^10.3.16",
+    "react-github-btn": "^1.4.0",
     "react-hot-toast": "^2.4.0",
     "react-loader-spinner": "^5.3.4",
     "react-router-dom": "^6.4.1",

diff --git a/packages/client/src/App.css b/packages/client/src/App.css
@@ -1,6 +1,6 @@
 #top-navbar{
     height: 60px;
-    background: #dbdbdb;
+    background: #f3f4f5;
     display: flex;
     flex-direction: row;
     align-items: center;

diff --git a/packages/client/src/home/environmentSelector.tsx b/packages/client/src/home/environmentSelector.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
@@ -16,10 +15,7 @@ export default function EnvironmentSelector({ environmentProp, setEnvironmentPro
         setEnvironmentProp(event.target.value);
     };
     return (
-        <FormControl sx={{ m: 1, minWidth: 120, background: '#cecece', borderRadius: 2, marginLeft: 3 }} size="small">
-            <InputLabel id="environment-selector-label" style={{ color: 'rgb(110 110 110)', fontSize: 14 }}>
-                Environment
-            </InputLabel>
+        <FormControl sx={{ m: 1, minWidth: 120, background: '#e4e7eb', borderRadius: 2, marginLeft: 3 }} size="small">
             <Select
                 labelId="environment-selector"
                 id="environment-selector"

diff --git a/packages/client/src/home/navbar.tsx b/packages/client/src/home/navbar.tsx
@@ -4,6 +4,7 @@ import { SignedIn, UserButton } from '@clerk/clerk-react';
 import { Link } from 'react-router-dom';
 import QuizIcon from '@mui/icons-material/Quiz';
 import EnvironmentSelector from './environmentSelector';
+import GitHubButton from 'react-github-btn';
 
 const Navbar = ({ workspaceName, environment, setEnvironment, environmentList }) => {
     return (
@@ -32,9 +33,19 @@ const Navbar = ({ workspaceName, environment, setEnvironment, environmentList })
                         <QuizIcon /> Docs
                     </span>
                 </a>
+                <div className="mr-6 mt-1 ml-3">
+                    <GitHubButton
+                        href="https://github.com/revertinc/revert"
+                        data-size="large"
+                        data-icon="octicon-star"
+                        aria-label="Star revertinc/revert on GitHub"
+                    >
+                        Star us
+                    </GitHubButton>
+                </div>
                 <SignedIn>
                     <div className="mr-4">
-                        <UserButton afterSignOutUrl="/" />
+                        <UserButton afterSignOutUrl="/home" />
                     </div>
                 </SignedIn>
             </div>

diff --git a/packages/client/src/routes/index.tsx b/packages/client/src/routes/index.tsx
@@ -13,13 +13,13 @@ export function RouterComponent() {
             <Toaster position="bottom-right" reverseOrder={false} />
             <Routes>
                 <Route
-                    path="/"
+                    path="/home"
                     element={
                         <>
                             <SignedOut>
                                 <div className="flex items-center justify-center h-[100%]">
                                     <SignIn
-                                        afterSignUpUrl={'/'}
+                                        afterSignUpUrl={'/home'}
                                         appearance={{
                                             variables: {
                                                 colorPrimary: '#343232',
@@ -43,7 +43,7 @@ export function RouterComponent() {
                     element={
                         <div className="flex items-center justify-center h-[100%]">
                             <SignUp
-                                afterSignUpUrl={'/'}
+                                afterSignUpUrl={'/home'}
                                 appearance={{
                                     variables: {
                                         colorPrimary: '#343232',
@@ -70,8 +70,8 @@ export function RouterComponent() {
                         <>
                             <div className="flex items-center justify-center h-[100%]">
                                 <SignIn
-                                    redirectUrl={'/'}
-                                    afterSignInUrl={'/'}
+                                    redirectUrl={'/home'}
+                                    afterSignInUrl={'/home'}
                                     appearance={{
                                         variables: {
                                             colorPrimary: '#343232',

diff --git a/packages/js/.env.example b/packages/js/.env.example
@@ -0,0 +1,2 @@
+CORE_API_BASE_URL = http://localhost:4001/
+REDIRECT_URL_BASE = http://localhost:3000/oauth-callback
diff --git a/yarn.lock b/yarn.lock
@@ -6838,6 +6838,7 @@ __metadata:
     react-devtools: ^4.28.0
     react-dom: ^18.2.0
     react-flow-renderer: ^10.3.16
+    react-github-btn: ^1.4.0
     react-hot-toast: ^2.4.0
     react-loader-spinner: ^5.3.4
     react-router-dom: ^6.4.1
@@ -19102,6 +19103,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"github-buttons@npm:^2.22.0":
+  version: 2.27.0
+  resolution: "github-buttons@npm:2.27.0"
+  checksum: 1954e04fc7e65a5c14b9c0726b486015deee648c9de62f7f0d4267bbd548090f57137d33e1755490736b10578c4fc7bf149fe64c296d7634a1bfc3707e25e96b
+  languageName: node
+  linkType: hard
+
 "github-slugger@npm:^1.0.0":
   version: 1.5.0
   resolution: "github-slugger@npm:1.5.0"
@@ -27265,6 +27273,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-github-btn@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "react-github-btn@npm:1.4.0"
+  dependencies:
+    github-buttons: ^2.22.0
+  peerDependencies:
+    react: ">=16.3.0"
+  checksum: 33a416ad76ab4cc9238ac5cf5cfcab636bb2127c48fb30805385350fd3a3c2aa0aaeb78f6c726c52a0d3d133ca469be35d4b3d188c8e40c735c7ff458d2c8c3c
+  languageName: node
+  linkType: hard
+
 "react-hot-toast@npm:^2.4.0":
   version: 2.4.0
   resolution: "react-hot-toast@npm:2.4.0"