Merge pull request #111 from slashbaseide/develop

Release v0.8.4

README.md

@@ -32,22 +32,22 @@
 
 # About
 
-Slashbase is open-source modern database IDE for your dev/data workflows. Use Slashbase to connect to any of your database, browse data and schema, write, run and save queries, create charts. Supports MySQL, PostgreSQL and MongoDB.
+Slashbase is an open-source modern database IDE for your dev/data workflows. Use Slashbase to connect to any of your database, browse data and schema, write, run and save queries, create charts. Supports MySQL, PostgreSQL and MongoDB.
 
 It is in beta (v0.8), help us make it better by sending your feedback and reach a stable (v1.0) version.
 > Star 🌟 & watch 👀 the repository to get updates.
 
 ## Features:
 
-- **🧑‍💻 Desktop App**: Use the IDE as standalone desktop app.
+- **🧑‍💻 Desktop App**: Use the IDE as a standalone desktop app.
 - **🪄 Modern Interface**: With a modern interface, it is easy to use.
 - **🪶 Lightweight**: Doesn't take much space on your system.
 - **⚡️ Quick Browse**: Quickly filter, sort & browse data and schema with a low-code UI.
-- **💾 Save Queries**: Write and Save queries to re-run in future.
+- **💾 Save Queries**: Write and Save queries to re-run in the future.
 - **📊 Create Charts**: Create charts from your query results.
-- **📺 Console**: Run commands like in you do in terminal.
+- **📺 Console**: Run commands like you do in the terminal.
 - **🗂 Projects**: Organise all database connections into various projects.
-- **📕 Query Cheatsheets**: Search and view query commands syntax right inside IDE.
+- **📕 Query Cheatsheets**: Search and view query commands syntax right inside the IDE.
 - **✅ Database Support**: MySQL, PostgreSQL and MongoDB.
 
 # Installation
@@ -59,8 +59,10 @@ Follow the steps below to download & start the app:
 1. Download the [latest release](https://github.com/slashbaseide/slashbase/releases) and extract / open the downloaded file.
 2. Follow the platform specific step below
     - For Windows, double click the Slashbase file to open the app
-    - For MacOS, drag the Slashbase file to Applications folder and start the app from launchpad.
-    - For linux, run `./Slashbase` on terminal to start the app.
+    - For MacOS, drag the Slashbase file into the Applications folder and start the app from Launchpad.
+    - For Linux, run `./Slashbase` in the terminal to start the app.
+      - Requires `libwebkit2gtk-4.0` to be installed. 
+        - On Arch-based distributions, you can install it with `pacman -S webkit2gtk`
 
 ## Build from source
 
@@ -108,18 +110,18 @@ Detailed documentation is available on [slashbase guide](https://slashbase.bip.w
 
 # Community
 
-Join our community on [discord](https://discord.gg/U6fXgm3FAX) and [bip](https://bip.so/slashbase/feed).
+Join our community on [Discord](https://discord.gg/U6fXgm3FAX) and [bip](https://bip.so/slashbase/feed).
 
 # Roadmap
 
-### Database Support
+## Database Support
 - ✅ PostgreSQL Query Engine
 - ✅ MongoDB Query Engine
 - ✅ MySQL Query Engine
 - ☑️ SQLite Query Engine
 - ☑️ Redis Query Engine
 
-### Features
+## Features
 - ✅ Query Cheatsheets
 - ☑️ Add/delete Data Models (Table/collections)
 - ☑️ Manage Views
@@ -132,7 +134,7 @@ Read our [contribution guide](CONTRIBUTING.md) for getting started on contributi
 
 # Support
 
-If you face any issues installing or using slashbase, send us a mail on slashbaseide@gmail.com or contact support chat on our website [slashbase.com](https://slashbase.com).
+If you face any issues installing or using Slashbase, send us a mail to slashbaseide@gmail.com or contact support chat on our website [slashbase.com](https://slashbase.com).
 
 # License
 

frontend/src/components/dbfragments/console.tsx

@@ -46,8 +46,8 @@ const DBConsoleFragment = ({ }: DBConsolePropType) => {
             text: "Start typing command and press enter to run it.\nType 'help' for more info on console.",
             cmd: false
         }} />
-        {output.map(block => {
-            return <OutputBlock block={block} />
+        {output.map((block, idx) => {
+            return <OutputBlock block={block} key={idx} />
         })}
         <PromptInputWithRef onChange={setInput} isActive={currentTab.isActive} nfocus={nfocus} confirmInput={confirmInput} />
         <span ref={consoleEndRef}></span>

frontend/src/components/layouts/footer.tsx

@@ -46,7 +46,7 @@ const Footer = (_: FooterPropType) => {
                         <span>{(isDBConnected !== undefined && isDBConnected) ? "connected" : "not connected"}</span>
                     </button>)
                 }
-                {isDBConnected === true &&
+                {showStatus && isDBConnected === true &&
                     (<button className={styles.button + " is-small"} onClick={refreshDataModels}>
                         <span className="icon is-small">
                             <i className="fas fa-sync" />

frontend/src/pages/project/newdb.tsx

@@ -18,10 +18,11 @@ const NewDBPage: FunctionComponent<{}> = () => {
     const dispatch = useAppDispatch()
     const projects: Project[] = useAppSelector(selectProjects)
     const project = projects.find(x => x.id === id)
-
     const [addingError, setAddingError] = useState(false)
     const [adding, setAdding] = useState(false)
-
+    const [inputError, setInputError] = useState({
+        error_1: false, error_2: false, error_3: false, error_4: false
+    })
     const [data, setData] = useState({
         dbName: "",
         dbType: DBConnType.POSTGRES,
@@ -41,8 +42,22 @@ const NewDBPage: FunctionComponent<{}> = () => {
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
         const type = e.target.type
+        const name = e.target.name;
 
-        const name = e.target.name
+        switch (name) {
+            case "dbName":
+                (e.target.value.trim().length > 0) ? setInputError({ ...inputError, error_1: false }) : setInputError({ ...inputError, error_1: true })
+                break;
+            case "dbHost":
+                (e.target.value.trim().length > 0) ? setInputError({ ...inputError, error_2: false }) : setInputError({ ...inputError, error_2: true })
+                break;
+            case "dbPort":
+                (e.target.value.trim().length > 0) ? setInputError({ ...inputError, error_3: false }) : setInputError({ ...inputError, error_3: true })
+                break;
+            case "dbDatabase":
+                (e.target.value.trim().length > 0) ? setInputError({ ...inputError, error_4: false }) : setInputError({ ...inputError, error_4: true })
+                break;
+        }
 
         const value = type === "checkbox"
             ? (e.target as HTMLInputElement).checked
@@ -81,16 +96,36 @@ const NewDBPage: FunctionComponent<{}> = () => {
             sshKeyFile: data.dbSSHKeyFile,
             useSSL: data.dbUseSSL,
         }
-
         try {
             await dispatch(addNewDBConn(payload)).unwrap()
             navigate(Constants.APP_PATHS.PROJECT.path.replace('[id]', project.id))
         } catch (e: any) {
+            var f1 = false, f2 = false, f3 = false, f4 = false;
+            (payload.name.length === 0) ? f1 = true : f1 = false;
+            (payload.host.length === 0) ? f2 = true : f2 = false;
+            (payload.port.length === 0) ? f3 = true : f3 = false;
+            (payload.dbname.length === 0) ? f4 = true : f4 = false;
+            setInputError({
+                ...inputError,
+                error_1: f1,
+                error_2: f2,
+                error_3: f3,
+                error_4: f4
+            })
             setAddingError(e)
         }
+
         setAdding(false)
     }
 
+    const normal = {
+        border: ''
+    }
+
+    const inputStyle = {
+        border: '1px solid red'
+    }
+
     return (
         <>
             <h1>Add new database connection</h1>
@@ -101,12 +136,13 @@ const NewDBPage: FunctionComponent<{}> = () => {
                     value={data.dbName}
                     onChange={e => handleChange(e)}
                     placeholder="Enter a display name for database"
+                    style={inputError.error_1 ? inputStyle : normal}
                 />
                 <div className="field">
                     <label className="label">Database Type:</label>
                     <div className="control">
                         <div className="select">
-                            <select name="dbType" onChange={(e: React.ChangeEvent<HTMLSelectElement>) => { setData((prev) => ({ ...prev, [e.target.name]: e.target.value, dbScheme: "" })) }}>
+                            <select name="dbType" style={normal} onChange={(e: React.ChangeEvent<HTMLSelectElement>) => { setData((prev) => ({ ...prev, [e.target.name]: e.target.value, dbScheme: "" })) }}>
                                 <option value={DBConnType.POSTGRES}>PostgreSQL</option>
                                 <option value={DBConnType.MONGO}>MongoDB</option>
                                 <option value={DBConnType.MYSQL}>MySQL</option>
@@ -118,7 +154,7 @@ const NewDBPage: FunctionComponent<{}> = () => {
                     <label className="label">Scheme:</label>
                     <div className="control">
                         <div className="select">
-                            <select name='dbScheme' onChange={e => handleChange(e)}>
+                            <select name='dbScheme' style={normal} onChange={e => handleChange(e)}>
                                 <option value="default">Select scheme</option>
                                 <option value="mongodb">mongodb</option>
                                 <option value="mongodb+srv">mongodb+srv</option>
@@ -132,34 +168,39 @@ const NewDBPage: FunctionComponent<{}> = () => {
                     value={data.dbHost}
                     onChange={e => handleChange(e)}
                     placeholder="Enter host"
+                    style={inputError.error_2 ? inputStyle : normal}
                 />
                 <InputTextField
                     label='Port:'
                     name="dbPort"
                     value={data.dbPort}
                     onChange={e => handleChange(e)}
                     placeholder="Enter Port"
+                    style={inputError.error_3 ? inputStyle : normal}
                 />
                 <InputTextField
                     label='Database Name:'
                     name="dbDatabase"
                     value={data.dbDatabase}
                     onChange={e => handleChange(e)}
                     placeholder="Enter Database"
+                    style={inputError.error_4 ? inputStyle : normal}
                 />
                 <InputTextField
                     label='Database User:'
                     name="dbUsername"
                     value={data.dbUsername}
                     onChange={e => handleChange(e)}
                     placeholder="Enter Database username"
+                    style={normal}
                 />
                 <PasswordInputField
                     label='Database Password:'
                     name='dbPassword'
                     value={data.dbPassword}
                     onChange={e => handleChange(e)}
                     placeholder="Enter database password"
+                    style={normal}
                 />
                 <div className="field">
                     <label className="label">Use SSH:</label>
@@ -168,9 +209,10 @@ const NewDBPage: FunctionComponent<{}> = () => {
                             name='dbUseSSH'
                             value={data.dbUseSSH}
                             onChange={e => handleChange(e)}
+                            style={normal}
                         >
                             <option
-                                value={DBConnectionUseSSHType.NONE}>
+                                value={DBConnectionUseSSHType.NONE} >
                                 None
                             </option>
                             <option
@@ -194,7 +236,8 @@ const NewDBPage: FunctionComponent<{}> = () => {
                             name='dbUseSSL'
                             type="checkbox"
                             defaultChecked={false}
-                            onChange={e => handleChange(e)} />
+                            onChange={e => handleChange(e)}
+                        />
                         &nbsp;Enable SSL
                         <span className="help">If you are connecting to database which enforce/require SSL connection. (Example: Azure CosmosDB)</span>
                     </label>
@@ -208,13 +251,15 @@ const NewDBPage: FunctionComponent<{}> = () => {
                             value={data.dbSSHHost}
                             onChange={e => handleChange(e)}
                             placeholder="Enter SSH Host"
+                            style={normal}
                         />
                         <InputTextField
                             label='SSH User:'
                             name="dbSSHUser"
                             value={data.dbSSHUser}
                             onChange={e => handleChange(e)}
                             placeholder="Enter SSH User"
+                            style={normal}
                         />
                         {(data.dbUseSSH === DBConnectionUseSSHType.PASSWORD || data.dbUseSSH === DBConnectionUseSSHType.PASSKEYFILE) &&
                             <PasswordInputField
@@ -223,6 +268,7 @@ const NewDBPage: FunctionComponent<{}> = () => {
                                 value={data.dbSSHPassword}
                                 onChange={e => handleChange(e)}
                                 placeholder="Enter SSH Password"
+                                style={normal}
                             />
                         }
                         {(data.dbUseSSH === DBConnectionUseSSHType.KEYFILE || data.dbUseSSH === DBConnectionUseSSHType.PASSKEYFILE) &&
@@ -234,7 +280,9 @@ const NewDBPage: FunctionComponent<{}> = () => {
                                         name='dbSSHKeyFile'
                                         value={data.dbSSHKeyFile}
                                         onChange={e => handleChange(e)}
-                                        placeholder="Paste the contents of SSH Identity File here" />
+                                        placeholder="Paste the contents of SSH Identity File here"
+                                        style={normal}
+                                    />
                                 </div>
                             </div>
                         }

frontend/wailsjs/runtime/runtime.d.ts

@@ -225,3 +225,11 @@ export function Hide(): void;
 // [Show](https://wails.io/docs/reference/runtime/intro#show)
 // Shows the application.
 export function Show(): void;
+
+// [ClipboardGetText](https://wails.io/docs/reference/runtime/clipboard#clipboardgettext)
+// Returns the current text stored on clipboard
+export function ClipboardGetText(): Promise<string>;
+
+// [ClipboardSetText](https://wails.io/docs/reference/runtime/clipboard#clipboardsettext)
+// Sets a text on the clipboard
+export function ClipboardSetText(text: string): Promise<boolean>;

frontend/wailsjs/runtime/runtime.js

@@ -37,19 +37,19 @@ export function LogFatal(message) {
 }
 
 export function EventsOnMultiple(eventName, callback, maxCallbacks) {
-    window.runtime.EventsOnMultiple(eventName, callback, maxCallbacks);
+    return window.runtime.EventsOnMultiple(eventName, callback, maxCallbacks);
 }
 
 export function EventsOn(eventName, callback) {
-    EventsOnMultiple(eventName, callback, -1);
+    return EventsOnMultiple(eventName, callback, -1);
 }
 
 export function EventsOff(eventName, ...additionalEventNames) {
     return window.runtime.EventsOff(eventName, ...additionalEventNames);
 }
 
 export function EventsOnce(eventName, callback) {
-    EventsOnMultiple(eventName, callback, 1);
+    return EventsOnMultiple(eventName, callback, 1);
 }
 
 export function EventsEmit(eventName) {
@@ -192,3 +192,11 @@ export function Hide() {
 export function Show() {
     window.runtime.Show();
 }
+
+export function ClipboardGetText() {
+    return window.runtime.ClipboardGetText();
+}
+
+export function ClipboardSetText(text) {
+    return window.runtime.ClipboardSetText(text);
+}

go.mod

@@ -13,10 +13,10 @@ require (
 	github.com/joho/godotenv v1.4.0
 	github.com/posthog/posthog-go v0.0.0-20221221115252-24dfed35d71a
 	github.com/tdewolff/parse/v2 v2.6.5
-	github.com/wailsapp/wails/v2 v2.3.1
+	github.com/wailsapp/wails/v2 v2.4.1
 	github.com/xwb1989/sqlparser v0.0.0-20180606152119-120387863bf2
 	go.mongodb.org/mongo-driver v1.11.1
-	golang.org/x/crypto v0.0.0-20220722155217-630584e8d5aa
+	golang.org/x/crypto v0.1.0
 	gopkg.in/yaml.v2 v2.4.0
 	gorm.io/driver/sqlite v1.4.4
 	gorm.io/gorm v1.24.3
@@ -47,7 +47,6 @@ require (
 	github.com/golang/protobuf v1.5.0 // indirect
 	github.com/golang/snappy v0.0.1 // indirect
 	github.com/grpc-ecosystem/grpc-gateway v1.16.0 // indirect
-	github.com/imdario/mergo v0.3.12 // indirect
 	github.com/jackc/chunkreader/v2 v2.0.1 // indirect
 	github.com/jackc/pgconn v1.13.0 // indirect
 	github.com/jackc/pgio v1.0.0 // indirect
@@ -89,10 +88,10 @@ require (
 	github.com/xtgo/uuid v0.0.0-20140804021211-a0b114877d4c // indirect
 	github.com/youmark/pkcs8 v0.0.0-20181117223130-1be2e3e5546d // indirect
 	golang.org/x/exp v0.0.0-20220303212507-bbda1eaf7a17 // indirect
-	golang.org/x/net v0.4.0 // indirect
+	golang.org/x/net v0.7.0 // indirect
 	golang.org/x/sync v0.0.0-20210220032951-036812b2e83c // indirect
-	golang.org/x/sys v0.3.0 // indirect
-	golang.org/x/text v0.5.0 // indirect
+	golang.org/x/sys v0.5.0 // indirect
+	golang.org/x/text v0.7.0 // indirect
 	google.golang.org/genproto v0.0.0-20200911024640-645f7a48b24f // indirect
 	google.golang.org/grpc v1.33.1 // indirect
 	google.golang.org/protobuf v1.28.1 // indirect