Merge pull request #123 from slashbaseide/develop

Release 0.9.1
slashbase · May 9, 2023 · fda4ab0 · fda4ab0
2 parents a2b9a33 + 54fef46
commit fda4ab0
Show file tree

Hide file tree

Showing 73 changed files with 1,916 additions and 1,556 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -31,8 +31,5 @@ app.db
 # Wails
 build/bin
 node_modules
-frontend/desktop/dist
-build/darwin/gon-notarize.json
-
-# Frontend Server
-frontend/server/dist
+frontend/dist
+build/darwin/gon-notarize.json
diff --git a/.gitignore b/.gitignore
@@ -31,8 +31,5 @@ app.db
 # Wails
 build/bin
 node_modules
-frontend/desktop/dist
-build/darwin/gon-notarize.json
-
-# Frontend Server
-frontend/server/dist
+frontend/dist
+build/darwin/gon-notarize.json
diff --git a/Dockerfile b/Dockerfile
@@ -15,15 +15,6 @@ RUN apk update && apk add --no-cache ca-certificates git build-base && update-ca
 COPY go.mod go.sum ./
 RUN go mod download
 
-# Executable builder
-FROM base as backendbuilder
-
-WORKDIR /app
-COPY . .
-RUN mkdir -p /app/frontend/desktop/dist
-RUN touch /app/frontend/desktop/dist/nofile
-RUN make build-server
-
 # Install dependencies only when needed
 FROM node:alpine AS deps
 
@@ -40,12 +31,19 @@ COPY ./frontend/server/ .
 COPY --from=deps /app/node_modules ./node_modules
 RUN yarn build
 
+# Executable builder
+FROM base as backendbuilder
+
+WORKDIR /app
+COPY . .
+COPY --from=frontendbuilder /dist /app/frontend/dist
+RUN make build-server
+
 # Production
 FROM alpine:3.14
 
 WORKDIR /slashbase
 COPY --from=backendbuilder /app/slashbase /slashbase
-COPY --from=frontendbuilder /app/dist /slashbase/web
 
 ENTRYPOINT ["/slashbase/slashbase"]
 EXPOSE 3000
diff --git a/development.env.sample b/development.env.sample
diff --git a/frontend/desktop/src/components/cards/dbconncard/newdbconnectionbutton.tsx b/frontend/desktop/src/components/cards/dbconncard/newdbconnectionbutton.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { Project } from '../../../data/models'
 import Constants from '../../../constants'
 import { Link } from 'react-router-dom'
+import Button from '../../ui/Button'
 
 type NewDBConnButtonPropType = {
     project: Project
@@ -12,11 +13,7 @@ const NewDBConnButton = ({ project }: NewDBConnButtonPropType) => {
     return (
         <Link to={Constants.APP_PATHS.NEW_DB.path.replace('[id]', project.id)}>
             <a>
-                <button className="button" >
-                    <i className={"fas fa-plus-circle"} />
-                    &nbsp;&nbsp;
-                    Add New DB Connection
-                </button>
+            <Button text="Add New DB Connection" icon={<i className={"fas fa-plus-circle"} />} />
             </a>
         </Link>
     )

diff --git a/frontend/desktop/src/components/cards/dbdatamodelcard/dbdatamodelcard.tsx b/frontend/desktop/src/components/cards/dbdatamodelcard/dbdatamodelcard.tsx
@@ -3,6 +3,7 @@ import { DBConnection, DBDataModel } from '../../../data/models'
 import { DBConnType, TabType } from '../../../data/defaults'
 import { useAppDispatch } from '../../../redux/hooks'
 import { updateActiveTab } from '../../../redux/tabsSlice'
+import Button from '../../ui/Button'
 
 type DBDataModelPropType = {
     dbConnection: DBConnection
@@ -33,14 +34,18 @@ const DBDataModelCard = ({ dataModel, dbConnection }: DBDataModelPropType) => {
                         <b>{dataModel.name}</b>}
                 </div>
                 <div className="buttons">
-                    <button className="button is-small is-white" onClick={updateActiveTabToData}>
-                        <span className="icon is-small"><i className="fas fa-table" /></span>
-                        <span>View Data</span>
-                    </button>
-                    <button className="button is-small is-white" onClick={updateActiveTabToModel}>
-                        <span className="icon is-small"><i className="fas fa-list-alt" /></span>
-                        <span>View Model</span>
-                    </button>
+                    <Button 
+                        className="is-small is-white"
+                        icon={<i className="fas fa-table"/>}
+                        onClick={updateActiveTabToData}
+                        text='View Data'
+                    />
+                    <Button 
+                        className="is-small is-white"
+                        icon={<i className="fas fa-list-alt"/>}
+                        onClick={updateActiveTabToModel}
+                        text='View Model'
+                    />
                 </div>
             </div>
         </div>

diff --git a/frontend/desktop/src/components/dbfragments/chart/chart.tsx b/frontend/desktop/src/components/dbfragments/chart/chart.tsx
@@ -13,6 +13,7 @@ import {
     ArcElement,
     Tooltip
 } from 'chart.js'
+import Button from '../../ui/Button'
 
 ChartJS.register(
     CategoryScale,
@@ -135,7 +136,7 @@ const Chart = ({ dbConn, queryData }: ChartPropType) => {
                             </div>
                             <br />
                             <div className="control">
-                                <button className="button is-primary" onClick={createChart}>Create</button>
+                                <Button className="is-primary" onClick={createChart} text='Create'/>
                             </div>
 
                         </React.Fragment>

diff --git a/frontend/desktop/src/components/dbfragments/cheatsheet/cheatsheet.tsx b/frontend/desktop/src/components/dbfragments/cheatsheet/cheatsheet.tsx
@@ -3,6 +3,7 @@ import { DBConnType } from '../../../data/defaults'
 import CheatsheetCommand from './command'
 import _ from 'lodash'
 import lunr from 'lunr'
+import Button from '../../ui/Button'
 
 type CheatSheetPropType = {
     dbType: DBConnType
@@ -69,7 +70,7 @@ const CheatSheetModal = ({ dbType, onClose }: CheatSheetPropType) => {
                     </>}
                 </section>
                 <footer className="modal-card-foot">
-                    <button className="button" onClick={onClose}>Close</button>
+                    <Button onClick={onClose} text='Close'/>
                 </footer>
             </div>
         </div>

diff --git a/frontend/desktop/src/components/dbfragments/datamodel/addfieldmodal.tsx b/frontend/desktop/src/components/dbfragments/datamodel/addfieldmodal.tsx
@@ -4,6 +4,7 @@ import toast from 'react-hot-toast'
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks'
 import { addDBDataModelField } from '../../../redux/dataModelSlice'
 import TabContext from '../../layouts/tabcontext'
+import Button from '../../ui/Button'
 
 type AddModal = {
     dbConn: DBConnection
@@ -64,8 +65,8 @@ const AddFieldModal = ({ dbConn, mSchema, mName, onAddField, onClose }: AddModal
                     </div>
                 </section>
                 <footer className="modal-card-foot">
-                    <button className="button is-primary" onClick={startAdding}>Add</button>
-                    <button className="button" onClick={onClose}>Cancel</button>
+                    <Button className="is-primary" text='Add' onClick={startAdding}/>
+                    <Button text='Cancel' onClick={onClose}/>
                 </footer>
             </div>
         </div>

diff --git a/frontend/desktop/src/components/dbfragments/datamodel/addindexmodal.tsx b/frontend/desktop/src/components/dbfragments/datamodel/addindexmodal.tsx
@@ -4,6 +4,7 @@ import toast from 'react-hot-toast'
 import { addDBDataModelIndex } from '../../../redux/dataModelSlice'
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks'
 import TabContext from '../../layouts/tabcontext'
+import Button from '../../ui/Button'
 
 type AddIndexModal = {
     dbConn: DBConnection
@@ -74,8 +75,8 @@ const AddIndexModal = ({ dbConn, mSchema, mName, onAddIndex, onClose }: AddIndex
                     </div>
                 </section>
                 <footer className="modal-card-foot">
-                    <button className="button is-primary" onClick={startAdding}>Add</button>
-                    <button className="button" onClick={onClose}>Cancel</button>
+                    <Button className="is-primary" text='Add' onClick={startAdding}/>
+                    <Button text='Cancel' onClick={onClose}/>
                 </footer>
             </div>
         </div>

diff --git a/frontend/desktop/src/components/dbfragments/datamodel/datamodel.tsx b/frontend/desktop/src/components/dbfragments/datamodel/datamodel.tsx
@@ -10,6 +10,7 @@ import AddIndexModal from './addindexmodal'
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks'
 import { deleteDBDataModelField, deleteDBDataModelIndex, getSingleDataModel, selectSingleDataModel } from '../../../redux/dataModelSlice'
 import TabContext from '../../layouts/tabcontext'
+import Button from '../../ui/Button'
 
 type DataModelPropType = {
     dbConn: DBConnection
@@ -77,15 +78,19 @@ const DataModel = ({ dbConn, mschema, mname, isEditable }: DataModelPropType) =>
                         <tr>
                             <th colSpan={(dbConn.type === DBConnType.POSTGRES || dbConn.type === DBConnType.MYSQL) ? 4 : 5}>
                                 {label}
-                                {isEditable && <button className="button is-small" style={{ float: 'right' }} onClick={() => { setIsEditingModel(!isEditingModel) }}>
-                                    {isEditingModel && <i className={"fas fa-check"} />}
-                                    {!isEditingModel && <i className={"fas fa-pen"} />}
-                                </button>}
+                                {isEditable && <Button 
+                                    className="is-small"
+                                    style={{ float: 'right' }}
+                                    icon={isEditingIndex ? <i className='fas fa-check'/> : <i className='fas fa-pen'/>}
+                                    onClick={() => { setIsEditingModel(!isEditingModel) }}
+                                />}
                             </th>
                             {(dbConn.type === DBConnType.POSTGRES || dbConn.type === DBConnType.MYSQL) && isEditingModel && <th>
-                                <button className="button is-primary is-small" onClick={() => { setShowingAddFieldModal(true) }}>
-                                    <i className={"fas fa-plus"} />
-                                </button>
+                                <Button 
+                                    className="is-primary is-small"
+                                    icon={<i className={"fas fa-plus"} />}
+                                    onClick={() => { setShowingAddFieldModal(true) }}
+                                />
                             </th>}
                         </tr>
                     </thead>
@@ -108,9 +113,12 @@ const DataModel = ({ dbConn, mschema, mname, isEditable }: DataModelPropType) =>
                                         )).reduce((prev, curr) => [prev, ' ', curr])}
                                     </td>}
                                     {isEditingModel && <td>
-                                        <button className="button is-danger is-small" style={{ float: 'right' }} onClick={() => { setDeletingField(field.name) }}>
-                                            <i className={"fas fa-trash"} />
-                                        </button>
+                                        <Button
+                                            className='is-danger is-small'
+                                            style={{ float: 'right' }}
+                                            onClick={() => { setDeletingField(field.name) }}
+                                            icon={<i className={"fas fa-trash"} />}
+                                        />
                                     </td>}
                                 </tr>
                             ))
@@ -123,15 +131,18 @@ const DataModel = ({ dbConn, mschema, mname, isEditable }: DataModelPropType) =>
                             <tr>
                                 <th colSpan={2}>
                                     Indexes
-                                    {isEditable && <button className="button is-small" style={{ float: 'right' }} onClick={() => { setIsEditingIndex(!isEditingIndex) }}>
-                                        {isEditingIndex && <i className={"fas fa-check"} />}
-                                        {!isEditingIndex && <i className={"fas fa-pen"} />}
-                                    </button>}
+                                    {isEditable && <Button className="is-small" 
+                                            style={{ float: 'right' }} 
+                                            onClick={() => { setIsEditingIndex(!isEditingIndex) }}
+                                            icon={isEditingIndex ? <i className='fas fa-check'/> : <i className='fas fa-pen'/>}
+                                        />
+                                    }
                                 </th>
                                 {isEditingIndex && <th>
-                                    <button className="button is-primary is-small" onClick={() => { setShowingAddIndexModal(true) }}>
-                                        <i className={"fas fa-plus"} />
-                                    </button>
+                                    <Button className="is-primary is-small" 
+                                        onClick={() => { setShowingAddIndexModal(true) }}
+                                        icon={<i className={"fas fa-plus"}/>}
+                                    />
                                 </th>}
                             </tr>
                         </thead>
@@ -142,9 +153,12 @@ const DataModel = ({ dbConn, mschema, mname, isEditable }: DataModelPropType) =>
                                         <td>{idx.name}</td>
                                         <td>{idx.indexDef}</td>
                                         {isEditingIndex && <td>
-                                            <button className="button is-danger is-small" style={{ float: 'right' }} onClick={() => { setDeletingIndex(idx.name) }}>
-                                                <i className={"fas fa-trash"} />
-                                            </button>
+                                            <Button 
+                                                className="is-danger is-small" 
+                                                style={{ float: 'right' }} 
+                                                onClick={() => { setDeletingIndex(idx.name) }}
+                                                icon={<i className={"fas fa-trash"}/>}
+                                            />
                                         </td>}
                                     </tr>
                                 ))

diff --git a/frontend/desktop/src/components/dbfragments/history.tsx b/frontend/desktop/src/components/dbfragments/history.tsx
@@ -7,6 +7,7 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 import dateformat from 'dateformat'
 import { getDBQueryLogs, reset, selectDBQueryLogs, selectDBQueryLogsNext } from '../../redux/dbHistorySlice'
 import TabContext from '../layouts/tabcontext'
+import Button from '../ui/Button'
 
 
 type DBHistoryPropType = {
@@ -49,12 +50,11 @@ const DBHistoryFragment = ({ }: DBHistoryPropType) => {
                 <React.Fragment>
                     <div className="is-flex is-justify-content-space-between">
                         <h1>Showing History in {dbConnection.name}</h1>
-                        <button className="button is-flex" onClick={refreshHandler}>
-                            <span className="icon is-small">
-                                <i className="fas fa-sync" />
-                            </span>
-                            <span>Refresh</span>
-                        </button>
+                        <Button
+                            text='Refresh' 
+                            icon={<i className="fas fa-sync"/>}
+                            onClick={refreshHandler}
+                        />
                     </div>
                     <br />
                     <InfiniteScroll

diff --git a/frontend/desktop/src/components/dbfragments/home.tsx b/frontend/desktop/src/components/dbfragments/home.tsx
@@ -7,6 +7,7 @@ import DBDataModelCard from '../cards/dbdatamodelcard/dbdatamodelcard'
 import { TabType } from '../../data/defaults'
 import { updateActiveTab } from '../../redux/tabsSlice'
 import TabContext from '../layouts/tabcontext'
+import Button from '../ui/Button'
 
 type DBHomePropType = {
 }
@@ -43,14 +44,16 @@ const DBHomeFragment = ({ }: DBHomePropType) => {
                         <DBDataModelCard key={x.schemaName + x.name} dataModel={x} dbConnection={dbConnection} />
                     ))}
                     <div className="buttons">
-                        <button className="button" onClick={updateActiveTabToQuery}>
-                            <span className="icon is-small"><i className="fas fa-circle-plus" /></span>
-                            <span>New Query</span>
-                        </button>
-                        <button className="button" onClick={updateActiveTabToHistory}>
-                            <span className="icon is-small"><i className="fas fa-history" /></span>
-                            <span>View History</span>
-                        </button>
+                        <Button
+                            text='New Query'
+                            icon={<i className="fas fa-circle-plus"/>} 
+                            onClick={updateActiveTabToQuery}
+                        />
+                        <Button
+                            text='View History'
+                            icon={<i className="fas fa-history"/>} 
+                            onClick={updateActiveTabToHistory}
+                        />
                     </div>
                 </React.Fragment>
             }

diff --git a/frontend/desktop/src/components/dbfragments/jsontable/addmodel.tsx b/frontend/desktop/src/components/dbfragments/jsontable/addmodel.tsx
@@ -7,6 +7,7 @@ import { javascript } from '@codemirror/lang-javascript'
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks'
 import { addDBData, selectQueryData, setQueryData } from '../../../redux/dataModelSlice'
 import TabContext from '../../layouts/tabcontext'
+import Button from '../../ui/Button'
 
 type AddModal = {
     dbConnection: DBConnection
@@ -66,8 +67,8 @@ const AddModal = ({ dbConnection, mName, onClose }: AddModal) => {
                 />
             </section>
             <footer className="modal-card-foot">
-                <button className="button is-primary" onClick={startAdding}>Add</button>
-                <button className="button" onClick={onClose}>Cancel</button>
+                <Button text='Add' className="is-primary" onClick={startAdding} />
+                <Button text='Cancel' onClick={onClose} />
             </footer>
         </div>
     </div>)

diff --git a/frontend/desktop/src/components/dbfragments/jsontable/jsoncell.tsx b/frontend/desktop/src/components/dbfragments/jsontable/jsoncell.tsx
@@ -6,6 +6,7 @@ import toast from 'react-hot-toast'
 import ReactJson from 'react-json-view'
 import ReactCodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
+import Button from '../../ui/Button'
 
 
 const JsonCell = ({
@@ -58,17 +59,17 @@ const JsonCell = ({
                 onChange={onChange}
             />
             <div className="column is-flex is-justify-content-flex-end">
-                <button className="button is-small" onClick={cancelEdit}>
-                    <span className="icon is-small">
-                        <i className="fas fa-window-close" />
-                    </span>
-                </button>
+                <Button
+                    className="is-small" 
+                    icon={<i className="fas fa-window-close"/>} 
+                    onClick={cancelEdit}
+                />
                 <span>&nbsp;&nbsp;</span>
-                <button className="button is-primary is-small" onClick={onSave}>
-                    <span className="icon is-small">
-                        <i className="fas fa-save" />
-                    </span>
-                </button>
+                <Button 
+                    className="is-primary is-small" 
+                    icon={<i className="fas fa-save"/>} 
+                    onClick={onSave}
+                />
             </div>
         </React.Fragment>)
     }