Merge branch 'develop' into merge_create_user_modals
# Conflicts: # packages/builder/src/pages/builder/portal/manage/users/_components/BasicOnboardingModal.svelte
This commit is contained in:
Maurits Lourens
commit
ef872416ff
|
|
@ -4,4 +4,6 @@ dist
|
|||
packages/server/builder
|
||||
packages/server/coverage
|
||||
packages/server/client
|
||||
packages/builder/.routify
|
||||
packages/builder/.routify
|
||||
packages/builder/cypress/support/queryLevelTransformerFunction.js
|
||||
packages/builder/cypress/support/queryLevelTransformerFunctionWithData.js
|
||||
|
|
@ -24,9 +24,28 @@
|
|||
{
|
||||
"files": ["*.svelte"],
|
||||
"processor": "svelte3/svelte3"
|
||||
},
|
||||
{
|
||||
"files": ["**/*.ts"],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"plugins": [],
|
||||
"extends": [
|
||||
"eslint:recommended"
|
||||
],
|
||||
"rules": {
|
||||
"no-unused-vars": "off",
|
||||
"no-inner-declarations": "off",
|
||||
"no-case-declarations": "off",
|
||||
"no-useless-escape": "off",
|
||||
"no-undef": "off",
|
||||
"no-prototype-builtins": "off"
|
||||
}
|
||||
}
|
||||
],
|
||||
"rules": {
|
||||
"no-self-assign": "off"
|
||||
},
|
||||
"globals": {
|
||||
"GeolocationPositionError": true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
6
.github/workflows/budibase_ci.yml
vendored
6
.github/workflows/budibase_ci.yml
vendored
|
|
@ -43,4 +43,8 @@ jobs:
|
|||
verbose: true
|
||||
|
||||
# TODO: parallelise this
|
||||
- run: yarn test:e2e:ci
|
||||
- name: Cypress run
|
||||
uses: cypress-io/github-action@v2
|
||||
with:
|
||||
install: false
|
||||
command: yarn test:e2e:ci
|
||||
|
|
|
|||
11
.github/workflows/deploy-cloud.yaml
vendored
11
.github/workflows/deploy-cloud.yaml
vendored
|
|
@ -38,6 +38,17 @@ jobs:
|
|||
fi
|
||||
echo "RELEASE_VERSION=$release_version" >> $GITHUB_ENV
|
||||
|
||||
- name: Tag and release Proxy service docker image
|
||||
run: |
|
||||
docker login -u $DOCKER_USER -p $DOCKER_PASSWORD
|
||||
yarn build:docker:proxy:prod
|
||||
docker tag proxy-service budibase/proxy:$PROD_TAG
|
||||
docker push budibase/proxy:$PROD_TAG
|
||||
env:
|
||||
DOCKER_USER: ${{ secrets.DOCKER_USERNAME }}
|
||||
DOCKER_PASSWORD: ${{ secrets.DOCKER_API_KEY }}
|
||||
PROD_TAG: k8s
|
||||
|
||||
- name: Configure AWS Credentials
|
||||
uses: aws-actions/configure-aws-credentials@v1
|
||||
with:
|
||||
|
|
|
|||
12
.github/workflows/deploy-preprod.yml
vendored
12
.github/workflows/deploy-preprod.yml
vendored
|
|
@ -23,12 +23,24 @@ jobs:
|
|||
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
|
||||
aws-region: eu-west-1
|
||||
|
||||
|
||||
- name: Get the latest budibase release version
|
||||
id: version
|
||||
run: |
|
||||
release_version=$(cat lerna.json | jq -r '.version')
|
||||
echo "RELEASE_VERSION=$release_version" >> $GITHUB_ENV
|
||||
|
||||
- name: Tag and release Proxy service docker image
|
||||
run: |
|
||||
docker login -u $DOCKER_USER -p $DOCKER_PASSWORD
|
||||
yarn build:docker:proxy:preprod
|
||||
docker tag proxy-service budibase/proxy:$PREPROD_TAG
|
||||
docker push budibase/proxy:$PREPROD_TAG
|
||||
env:
|
||||
DOCKER_USER: ${{ secrets.DOCKER_USERNAME }}
|
||||
DOCKER_PASSWORD: ${{ secrets.DOCKER_API_KEY }}
|
||||
PREPROD_TAG: k8s-preprod
|
||||
|
||||
- name: Pull values.yaml from budibase-infra
|
||||
run: |
|
||||
curl -H "Authorization: token ${{ secrets.GH_PERSONAL_TOKEN }}" \
|
||||
|
|
|
|||
10
.github/workflows/release-selfhost.yml
vendored
10
.github/workflows/release-selfhost.yml
vendored
|
|
@ -47,6 +47,13 @@ jobs:
|
|||
yarn
|
||||
yarn build
|
||||
popd
|
||||
|
||||
- name: Build OpenAPI spec
|
||||
run: |
|
||||
pushd packages/server
|
||||
yarn
|
||||
yarn specs
|
||||
popd
|
||||
|
||||
- name: Setup Helm
|
||||
uses: azure/setup-helm@v1
|
||||
|
|
@ -56,6 +63,7 @@ jobs:
|
|||
run: |
|
||||
git config user.name "Budibase Helm Bot"
|
||||
git config user.email "<>"
|
||||
git reset --hard
|
||||
git pull
|
||||
helm package charts/budibase
|
||||
git checkout gh-pages
|
||||
|
|
@ -77,3 +85,5 @@ jobs:
|
|||
packages/cli/build/cli-win.exe
|
||||
packages/cli/build/cli-linux
|
||||
packages/cli/build/cli-macos
|
||||
packages/server/specs/openapi.yaml
|
||||
packages/server/specs/openapi.json
|
||||
|
|
|
|||
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -96,3 +96,6 @@ hosting/proxy/.generated-nginx.prod.conf
|
|||
*.sublime-workspace
|
||||
|
||||
bin/
|
||||
hosting/.generated*
|
||||
packages/builder/cypress.env.json
|
||||
stats.html
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
node_modules
|
||||
public
|
||||
dist
|
||||
*.spec.js
|
||||
packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
|
||||
packages/server/builder
|
||||
packages/server/coverage
|
||||
packages/server/client
|
||||
packages/builder/.routify
|
||||
packages/server/src/definitions/openapi.ts
|
||||
packages/builder/.routify
|
||||
packages/builder/cypress/support/queryLevelTransformerFunction.js
|
||||
packages/builder/cypress/support/queryLevelTransformerFunctionWithData.js
|
||||
|
|
|
|||
43
README.md
43
README.md
|
|
@ -11,7 +11,7 @@
|
|||
The low code platform you'll enjoy using
|
||||
</h3>
|
||||
<p align="center">
|
||||
Budibase is an open source low-code platform, and the easiest way to build internal tools that improve productivity.
|
||||
Budibase is an open source low-code platform, and the easiest way to build internal apps that improve productivity.
|
||||
</p>
|
||||
|
||||
<h3 align="center">
|
||||
|
|
@ -40,9 +40,11 @@
|
|||
</p>
|
||||
|
||||
<h3 align="center">
|
||||
<a href="https://docs.budibase.com/getting-started">Get started</a>
|
||||
<a href="https://account.budibase.app/register">Get started - we host (Budibase Cloud)</a>
|
||||
<span> · </span>
|
||||
<a href="https://docs.budibase.com">Docs</a>
|
||||
<a href="https://docs.budibase.com/docs/hosting-methods">Get started - you host (Docker, K8s, DO)</a>
|
||||
<span> · </span>
|
||||
<a href="https://docs.budibase.com/docs">Docs</a>
|
||||
<span> · </span>
|
||||
<a href="https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas">Feature request</a>
|
||||
<span> · </span>
|
||||
|
|
@ -100,16 +102,45 @@ Budibase is made to scale. With Budibase, you can self-host on your own infrastr
|
|||
|
||||
- Checkout the promo video: https://youtu.be/xoljVpty_Kw
|
||||
|
||||
<br />
|
||||
|
||||
---
|
||||
|
||||
<br />
|
||||
|
||||
|
||||
## Budibase Public API
|
||||
As with anything that we build in Budibase, our new public API is simple to use, flexible, and introduces new extensibility. To summarize, the Budibase API enables:
|
||||
|
||||
- Budibase as a backend
|
||||
- Interoperability
|
||||
|
||||
|
||||
#### Docs
|
||||
You can learn more about the Budibase API at the following places:
|
||||
|
||||
- [General documentation](https://docs.budibase.com/docs/public-api) : Learn how to get your API key, how to use spec, and how to use with Postman
|
||||
- [Interactive API documentation](https://docs.budibase.com/reference/post_applications) : Learn how to interact with the API
|
||||
|
||||
#### Guides
|
||||
|
||||
- [Build an app with Budibase and Next.js](https://budibase.com/blog/building-a-crud-app-with-budibase-and-next.js/)
|
||||
|
||||
<p align="center">
|
||||
<img alt="Budibase data" src="https://res.cloudinary.com/daog6scxm/image/upload/v1647858558/Feb%20release/Start_building_with_Budibase_s_API_3_rhlzhv.png">
|
||||
</p>
|
||||
<br /><br />
|
||||
|
||||
<br /><br /><br />
|
||||
|
||||
## 🏁 Get started
|
||||
|
||||
<a href="https://docs.budibase.com/self-hosting/self-host"><img src="https://res.cloudinary.com/daog6scxm/image/upload/v1634808888/logo/deploy_npl9za.png" /></a>
|
||||
<a href="https://docs.budibase.com/docs/hosting-methods"><img src="https://res.cloudinary.com/daog6scxm/image/upload/v1634808888/logo/deploy_npl9za.png" /></a>
|
||||
|
||||
Deploy Budibase self-hosted in your existing infrastructure, using Docker, Kubernetes, and Digital Ocean.
|
||||
Or use Budibase Cloud if you don't need to self-host, and would like to get started quickly.
|
||||
|
||||
### [Get started with self-hosting Budibase](https://docs.budibase.com/self-hosting/self-host)
|
||||
### [Get started with self-hosting Budibase](https://docs.budibase.com/docs/hosting-methods)
|
||||
|
||||
### [Get started with Budibase Cloud](https://budibase.com)
|
||||
|
||||
|
|
@ -118,7 +149,7 @@ Or use Budibase Cloud if you don't need to self-host, and would like to get star
|
|||
|
||||
## 🎓 Learning Budibase
|
||||
|
||||
The Budibase documentation [lives here](https://docs.budibase.com).
|
||||
The Budibase documentation [lives here](https://docs.budibase.com/docs).
|
||||
<br />
|
||||
|
||||
|
||||
|
|
|
|||
3
examples/nextjs-api-sales/.eslintrc.json
Normal file
3
examples/nextjs-api-sales/.eslintrc.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
38
examples/nextjs-api-sales/.gitignore
vendored
Normal file
38
examples/nextjs-api-sales/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
41
examples/nextjs-api-sales/README.md
Normal file
41
examples/nextjs-api-sales/README.md
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
# Budibase API + Next.js example
|
||||
|
||||
This is an example of how Budibase can be used as a backend for a Postgres database for a Next.js sales app. You will
|
||||
need to follow the walk-through that has been published in the Budibase docs to set up your Budibase app for this example.
|
||||
|
||||
## Pre-requisites
|
||||
|
||||
To use this example you will need:
|
||||
1. [Docker](https://www.docker.com/)
|
||||
2. [Docker Compose](https://docs.docker.com/compose/)
|
||||
3. [Node.js](https://nodejs.org/en/)
|
||||
4. A self-hosted Budibase installation
|
||||
|
||||
## Getting Started
|
||||
|
||||
The first step is to set up the database - you can do this by going to the `db/` directory and running the command:
|
||||
|
||||
```bash
|
||||
docker-compose up
|
||||
```
|
||||
|
||||
The next step is to follow the example walk-through and set up a Budibase app as it describes. Once you've done
|
||||
this you can configure the settings in `next.config.js`, specifically the `apiKey`, `host` and `appName`.
|
||||
|
||||
Finally, you can start the dev server with the following command:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
```
|
||||
|
||||
## Accessing the app
|
||||
|
||||
Open [http://localhost:3001](http://localhost:3001) with your browser to see the sales app.
|
||||
|
||||
Look in the API routes (`pages/api/sales.ts` and `pages/api/salespeople.ts`) to see how this is integrated with Budibase.
|
||||
There is also a utility file where some core functions and types have been defined, in `utilities/index.ts`.
|
||||
|
||||
## Attribution
|
||||
This example was set up using [Next.js](https://nextjs.org/) and bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
42
examples/nextjs-api-sales/components/layout.tsx
Normal file
42
examples/nextjs-api-sales/components/layout.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
import { ReactNotifications } from "react-notifications-component"
|
||||
|
||||
function layout(props: any) {
|
||||
return (
|
||||
<>
|
||||
<nav className="navbar" role="navigation" aria-label="main navigation">
|
||||
<div id="navbar" className="navbar-menu">
|
||||
<div className="logo">
|
||||
<Image alt="logo" src="/bb-emblem.svg" width="50" height="50" />
|
||||
</div>
|
||||
<div className="navbar-start">
|
||||
<Link href="/">
|
||||
<a className="navbar-item">
|
||||
List
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/save">
|
||||
<a className="navbar-item">
|
||||
New sale
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="navbar-end">
|
||||
<div className="navbar-item">
|
||||
<div className="buttons">
|
||||
<a className="button is-primary" href="https://budibase.readme.io/reference">
|
||||
<strong>API Documentation</strong>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<ReactNotifications />
|
||||
{props.children}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default layout
|
||||
28
examples/nextjs-api-sales/components/notifications.ts
Normal file
28
examples/nextjs-api-sales/components/notifications.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { Store } from "react-notifications-component"
|
||||
|
||||
const notifications = {
|
||||
error: (error: string, title: string) => {
|
||||
Store.addNotification({
|
||||
container: "top-right",
|
||||
type: "danger",
|
||||
message: error,
|
||||
title: title,
|
||||
dismiss: {
|
||||
duration: 10000,
|
||||
},
|
||||
})
|
||||
},
|
||||
success: (message: string, title: string) => {
|
||||
Store.addNotification({
|
||||
container: "top-right",
|
||||
type: "success",
|
||||
message: message,
|
||||
title: title,
|
||||
dismiss: {
|
||||
duration: 3000,
|
||||
},
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
export default notifications
|
||||
17
examples/nextjs-api-sales/db/docker-compose.yml
Normal file
17
examples/nextjs-api-sales/db/docker-compose.yml
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
version: "3.8"
|
||||
services:
|
||||
db:
|
||||
container_name: postgres
|
||||
image: postgres
|
||||
restart: always
|
||||
environment:
|
||||
POSTGRES_USER: root
|
||||
POSTGRES_PASSWORD: root
|
||||
POSTGRES_DB: postgres
|
||||
ports:
|
||||
- "5432:5432"
|
||||
volumes:
|
||||
- pg_data:/var/lib/postgresql/data/
|
||||
- ./init.sql:/docker-entrypoint-initdb.d/init.sql
|
||||
volumes:
|
||||
pg_data:
|
||||
21
examples/nextjs-api-sales/db/init.sql
Normal file
21
examples/nextjs-api-sales/db/init.sql
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
CREATE TABLE IF NOT EXISTS sales_people (
|
||||
person_id SERIAL PRIMARY KEY,
|
||||
name varchar(200) NOT NULL
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS sales (
|
||||
sale_id SERIAL PRIMARY KEY,
|
||||
sale_name varchar(200) NOT NULL,
|
||||
sold_by INT,
|
||||
CONSTRAINT sold_by_fk
|
||||
FOREIGN KEY(sold_by)
|
||||
REFERENCES sales_people(person_id)
|
||||
);
|
||||
|
||||
INSERT INTO sales_people (name)
|
||||
select 'Salesperson ' || id
|
||||
FROM GENERATE_SERIES(1, 50) as id;
|
||||
|
||||
INSERT INTO sales (sale_name, sold_by)
|
||||
select 'Sale ' || id, floor(random() * 50 + 1)::int
|
||||
FROM GENERATE_SERIES(1, 200) as id;
|
||||
7
examples/nextjs-api-sales/definitions/index.ts
Normal file
7
examples/nextjs-api-sales/definitions/index.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { components } from "./openapi"
|
||||
|
||||
export type App = components["schemas"]["applicationOutput"]["data"]
|
||||
export type Table = components["schemas"]["tableOutput"]["data"]
|
||||
export type TableSearch = components["schemas"]["tableSearch"]
|
||||
export type AppSearch = components["schemas"]["applicationSearch"]
|
||||
export type RowSearch = components["schemas"]["searchOutput"]
|
||||
1125
examples/nextjs-api-sales/definitions/openapi.ts
Normal file
1125
examples/nextjs-api-sales/definitions/openapi.ts
Normal file
File diff suppressed because it is too large
Load diff
5
examples/nextjs-api-sales/next-env.d.ts
vendored
Normal file
5
examples/nextjs-api-sales/next-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
16
examples/nextjs-api-sales/next.config.js
Normal file
16
examples/nextjs-api-sales/next.config.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
const { join } = require("path")
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
sassOptions: {
|
||||
includePaths: [join(__dirname, "styles")],
|
||||
},
|
||||
serverRuntimeConfig: {
|
||||
apiKey:
|
||||
"bf4d86af933b5ac0af0fdbe4bf7d89ff-f929752a1eeaafb00f4b5e3325097d51a44fe4b39f22ed857923409cc75414b379323a25ebfb4916",
|
||||
appName: "sales",
|
||||
host: "http://localhost:10000",
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
27
examples/nextjs-api-sales/package.json
Normal file
27
examples/nextjs-api-sales/package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "nextjs-api-sales",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev -p 3001",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"bulma": "^0.9.3",
|
||||
"next": "12.1.0",
|
||||
"node-fetch": "^3.2.2",
|
||||
"node-sass": "^7.0.1",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-notifications-component": "^3.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "17.0.21",
|
||||
"@types/react": "17.0.39",
|
||||
"eslint": "8.10.0",
|
||||
"eslint-config-next": "12.1.0",
|
||||
"typescript": "4.6.2"
|
||||
}
|
||||
}
|
||||
17
examples/nextjs-api-sales/pages/_app.tsx
Normal file
17
examples/nextjs-api-sales/pages/_app.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import "../styles/global.sass"
|
||||
import type { AppProps } from "next/app"
|
||||
import Head from "next/head"
|
||||
import Layout from "../components/layout"
|
||||
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<Layout>
|
||||
<Head>
|
||||
<title>BB NextJS Sales Example</title>
|
||||
</Head>
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
46
examples/nextjs-api-sales/pages/api/sales.ts
Normal file
46
examples/nextjs-api-sales/pages/api/sales.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import { getApp, findTable, makeCall } from "../../utilities"
|
||||
|
||||
async function getSales(req: any) {
|
||||
const { page } = req.query
|
||||
const { _id: appId } = await getApp()
|
||||
const table = await findTable(appId, "sales")
|
||||
return await makeCall("post", `tables/${table._id}/rows/search`, {
|
||||
appId,
|
||||
body: {
|
||||
limit: 10,
|
||||
sort: {
|
||||
type: "string",
|
||||
order: "descending",
|
||||
column: "sale_id",
|
||||
},
|
||||
paginate: true,
|
||||
bookmark: parseInt(page),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function saveSale(req: any) {
|
||||
const { _id: appId } = await getApp()
|
||||
const table = await findTable(appId, "sales")
|
||||
return await makeCall("post", `tables/${table._id}/rows`, {
|
||||
body: req.body,
|
||||
appId,
|
||||
})
|
||||
}
|
||||
|
||||
export default async function handler(req: any, res: any) {
|
||||
let response: any = {}
|
||||
try {
|
||||
if (req.method === "POST") {
|
||||
response = await saveSale(req)
|
||||
} else if (req.method === "GET") {
|
||||
response = await getSales(req)
|
||||
} else {
|
||||
res.status(404)
|
||||
return
|
||||
}
|
||||
res.status(200).json(response)
|
||||
} catch (err: any) {
|
||||
res.status(400).send(err)
|
||||
}
|
||||
}
|
||||
31
examples/nextjs-api-sales/pages/api/salespeople.ts
Normal file
31
examples/nextjs-api-sales/pages/api/salespeople.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { getApp, findTable, makeCall } from "../../utilities"
|
||||
|
||||
async function getSalespeople() {
|
||||
const { _id: appId } = await getApp()
|
||||
const table = await findTable(appId, "sales_people")
|
||||
return await makeCall("post", `tables/${table._id}/rows/search`, {
|
||||
appId,
|
||||
body: {
|
||||
sort: {
|
||||
type: "string",
|
||||
order: "ascending",
|
||||
column: "person_id",
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export default async function handler(req: any, res: any) {
|
||||
let response: any = {}
|
||||
try {
|
||||
if (req.method === "GET") {
|
||||
response = await getSalespeople()
|
||||
} else {
|
||||
res.status(404)
|
||||
return
|
||||
}
|
||||
res.status(200).json(response)
|
||||
} catch (err: any) {
|
||||
res.status(400).send(err)
|
||||
}
|
||||
}
|
||||
83
examples/nextjs-api-sales/pages/index.tsx
Normal file
83
examples/nextjs-api-sales/pages/index.tsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import type { NextPage } from "next"
|
||||
import styles from "../styles/home.module.css"
|
||||
import { useState, useEffect, useCallback } from "react"
|
||||
import Notifications from "../components/notifications"
|
||||
|
||||
const Home: NextPage = () => {
|
||||
const [sales, setSales] = useState([])
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [loaded, setLoaded] = useState(false)
|
||||
|
||||
const getSales = useCallback(async (page: Number = 1) => {
|
||||
let url = "/api/sales"
|
||||
if (page) {
|
||||
url += `?page=${page}`
|
||||
}
|
||||
const response = await fetch(url)
|
||||
if (!response.ok) {
|
||||
const error = await response.text()
|
||||
Notifications.error(error, "Failed to get sales")
|
||||
return
|
||||
}
|
||||
const sales = await response.json()
|
||||
// @ts-ignore
|
||||
setCurrentPage(page)
|
||||
return setSales(sales.data)
|
||||
}, [])
|
||||
|
||||
const goToNextPage = useCallback(async () => {
|
||||
await getSales(currentPage + 1)
|
||||
}, [currentPage, getSales])
|
||||
|
||||
const goToPrevPage = useCallback(async () => {
|
||||
if (currentPage > 1) {
|
||||
await getSales(currentPage - 1)
|
||||
}
|
||||
}, [currentPage, getSales])
|
||||
|
||||
useEffect(() => {
|
||||
getSales().then(() => {
|
||||
setLoaded(true)
|
||||
}).catch(() => {
|
||||
setSales([])
|
||||
})
|
||||
}, [])
|
||||
|
||||
if (!loaded) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.tableSection}>
|
||||
<h1 className="subtitle">Sales</h1>
|
||||
<div className={styles.table}>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Sale ID</th>
|
||||
<th>name</th>
|
||||
<th>Sold by</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sales.map((sale: any) =>
|
||||
<tr key={sale.sale_id}>
|
||||
<th>{sale.sale_id}</th>
|
||||
<th>{sale.sale_name}</th>
|
||||
<th>{sale.sales_person?.map((person: any) => person.primaryDisplay)[0]}</th>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className={styles.buttons}>
|
||||
<button className="button" onClick={goToPrevPage}>Prev Page</button>
|
||||
<button className="button" onClick={goToNextPage}>Next Page</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
81
examples/nextjs-api-sales/pages/save.tsx
Normal file
81
examples/nextjs-api-sales/pages/save.tsx
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
import type { NextPage } from "next"
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
import styles from "../styles/save.module.css"
|
||||
import Notifications from "../components/notifications"
|
||||
|
||||
const Save: NextPage = () => {
|
||||
const [salespeople, setSalespeople] = useState([])
|
||||
const [loaded, setLoaded] = useState(false)
|
||||
|
||||
const saveSale = useCallback(async (event: any) => {
|
||||
event.preventDefault()
|
||||
const sale = {
|
||||
sale_name: event.target.name.value,
|
||||
sales_person: [event.target.soldBy.value],
|
||||
}
|
||||
const response = await fetch("/api/sales", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(sale),
|
||||
})
|
||||
if (!response.ok) {
|
||||
const error = await response.text()
|
||||
Notifications.error(error, "Failed to save sale")
|
||||
return
|
||||
}
|
||||
Notifications.success("Sale saved successfully!", "Sale saved")
|
||||
}, [])
|
||||
|
||||
const getSalespeople = useCallback(async () => {
|
||||
const response: any = await fetch("/api/salespeople")
|
||||
if (!response.ok) {
|
||||
throw new Error(await response.text())
|
||||
}
|
||||
const json = await response.json()
|
||||
setSalespeople(json.data)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
getSalespeople().then(() => {
|
||||
setLoaded(true)
|
||||
}).catch(() => {
|
||||
setSalespeople([])
|
||||
})
|
||||
}, [])
|
||||
|
||||
if (!loaded) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.formSection}>
|
||||
<h1 className="subtitle">New sale</h1>
|
||||
<form onSubmit={saveSale}>
|
||||
<div className="field">
|
||||
<label className="label">Name</label>
|
||||
<div className="control">
|
||||
<input id="name" className="input" type="text" placeholder="Text input" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">Sold by</label>
|
||||
<div className="control">
|
||||
<div className="select">
|
||||
<select id="soldBy">
|
||||
{salespeople.map((person: any) => <option key={person._id} value={person._id}>{person.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="control">
|
||||
<button className="button is-link">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Save
|
||||
80
examples/nextjs-api-sales/public/bb-emblem.svg
Normal file
80
examples/nextjs-api-sales/public/bb-emblem.svg
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#393C44;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
.st2{fill:#4285F4;}
|
||||
</style>
|
||||
<rect x="-152.17" y="-24.17" class="st0" width="96.17" height="96.17"/>
|
||||
<path class="st1" d="M-83.19,48h-41.79c-1.76,0-3.19-1.43-3.19-3.19V3.02c0-1.76,1.43-3.19,3.19-3.19h41.79
|
||||
c1.76,0,3.19,1.43,3.19,3.19v41.79C-80,46.57-81.43,48-83.19,48z"/>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M-99.62,12.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58c0.86,0.39,1.59,0.91,2.19,1.57
|
||||
c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89c-0.35,0.9-0.84,1.68-1.47,2.35
|
||||
c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V35h-4.89V12.57H-99.62z
|
||||
M-93.46,28.11c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69
|
||||
c-0.38-0.17-0.79-0.26-1.24-0.26c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01
|
||||
c-0.17,0.39-0.26,0.8-0.26,1.23c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68
|
||||
c0.39,0.17,0.8,0.26,1.23,0.26c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1
|
||||
C-93.55,28.92-93.46,28.52-93.46,28.11z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st0" d="M-114.76,12.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58
|
||||
c0.86,0.39,1.59,0.91,2.19,1.57c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89
|
||||
c-0.35,0.9-0.84,1.68-1.47,2.35c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V35
|
||||
h-4.89V12.57H-114.76z M-108.6,28.11c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69
|
||||
c-0.38-0.17-0.79-0.26-1.24-0.26c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01
|
||||
c-0.17,0.39-0.26,0.8-0.26,1.23c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68
|
||||
c0.39,0.17,0.8,0.26,1.23,0.26c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1
|
||||
C-108.68,28.92-108.6,28.52-108.6,28.11z"/>
|
||||
</g>
|
||||
</g>
|
||||
<path class="st2" d="M44.81,159H3.02c-1.76,0-3.19-1.43-3.19-3.19v-41.79c0-1.76,1.43-3.19,3.19-3.19h41.79
|
||||
c1.76,0,3.19,1.43,3.19,3.19v41.79C48,157.57,46.57,159,44.81,159z"/>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st1" d="M28.38,123.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58c0.86,0.39,1.59,0.91,2.19,1.57
|
||||
c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89c-0.35,0.9-0.84,1.68-1.47,2.35
|
||||
c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V146h-4.89v-22.43H28.38z
|
||||
M34.54,139.11c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69
|
||||
c-0.38-0.17-0.79-0.26-1.24-0.26c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01
|
||||
c-0.17,0.39-0.26,0.8-0.26,1.23c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68
|
||||
c0.39,0.17,0.8,0.26,1.23,0.26c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1
|
||||
C34.45,139.92,34.54,139.52,34.54,139.11z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st1" d="M13.24,123.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58c0.86,0.39,1.59,0.91,2.19,1.57
|
||||
c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89c-0.35,0.9-0.84,1.68-1.47,2.35
|
||||
c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V146H8.35v-22.43H13.24z M19.4,139.11
|
||||
c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69c-0.38-0.17-0.79-0.26-1.24-0.26
|
||||
c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01c-0.17,0.39-0.26,0.8-0.26,1.23
|
||||
c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68c0.39,0.17,0.8,0.26,1.23,0.26
|
||||
c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1C19.32,139.92,19.4,139.52,19.4,139.11z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st0" d="M44,48H4c-2.21,0-4-1.79-4-4V4c0-2.21,1.79-4,4-4h40c2.21,0,4,1.79,4,4v40C48,46.21,46.21,48,44,48z"/>
|
||||
<g>
|
||||
<path class="st1" d="M28.48,12v10.44c1.18-1.27,2.65-1.9,4.42-1.9c1.05,0,2.01,0.2,2.89,0.61c0.87,0.41,1.62,0.96,2.24,1.65
|
||||
c0.62,0.69,1.1,1.5,1.45,2.44c0.35,0.94,0.52,1.93,0.52,2.99c0,1.08-0.18,2.09-0.54,3.04c-0.36,0.95-0.86,1.77-1.51,2.47
|
||||
c-0.64,0.7-1.4,1.25-2.28,1.66C34.8,35.8,33.86,36,32.84,36c-1.84,0-3.3-0.69-4.37-2.07v1.62h-5V12H28.48z M34.78,28.31
|
||||
c0-0.45-0.08-0.88-0.25-1.29c-0.17-0.41-0.4-0.76-0.69-1.06c-0.3-0.3-0.64-0.54-1.02-0.72c-0.39-0.18-0.81-0.27-1.27-0.27
|
||||
c-0.44,0-0.86,0.09-1.24,0.26c-0.39,0.17-0.72,0.41-1.01,0.71c-0.29,0.3-0.52,0.66-0.69,1.06c-0.18,0.41-0.26,0.84-0.26,1.29
|
||||
s0.08,0.88,0.25,1.28c0.17,0.4,0.4,0.74,0.69,1.04c0.29,0.29,0.64,0.53,1.04,0.71c0.4,0.18,0.82,0.27,1.26,0.27
|
||||
c0.44,0,0.86-0.09,1.24-0.26c0.39-0.17,0.72-0.41,1.01-0.71c0.29-0.3,0.52-0.65,0.69-1.05C34.69,29.16,34.78,28.75,34.78,28.31z"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st1" d="M13,12v10.44c1.18-1.27,2.65-1.9,4.42-1.9c1.05,0,2.01,0.2,2.89,0.61c0.87,0.41,1.62,0.96,2.24,1.65
|
||||
c0.62,0.69,1.1,1.5,1.45,2.44c0.35,0.94,0.52,1.93,0.52,2.99c0,1.08-0.18,2.09-0.54,3.04c-0.36,0.95-0.86,1.77-1.51,2.47
|
||||
c-0.64,0.7-1.4,1.25-2.28,1.66C19.32,35.8,18.38,36,17.37,36c-1.84,0-3.3-0.69-4.37-2.07v1.62H8V12H13z M19.3,28.31
|
||||
c0-0.45-0.08-0.88-0.25-1.29c-0.17-0.41-0.4-0.76-0.69-1.06c-0.3-0.3-0.64-0.54-1.02-0.72c-0.39-0.18-0.81-0.27-1.27-0.27
|
||||
c-0.44,0-0.86,0.09-1.24,0.26c-0.39,0.17-0.72,0.41-1.01,0.71c-0.29,0.3-0.52,0.66-0.69,1.06c-0.18,0.41-0.26,0.84-0.26,1.29
|
||||
s0.08,0.88,0.25,1.28c0.17,0.4,0.4,0.74,0.69,1.04c0.29,0.29,0.64,0.53,1.04,0.71c0.4,0.18,0.82,0.27,1.26,0.27
|
||||
c0.44,0,0.86-0.09,1.24-0.26c0.39-0.17,0.72-0.41,1.01-0.71c0.29-0.3,0.52-0.65,0.69-1.05C19.21,29.16,19.3,28.75,19.3,28.31z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.1 KiB |
BIN
examples/nextjs-api-sales/public/favicon.ico
Normal file
BIN
examples/nextjs-api-sales/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
26
examples/nextjs-api-sales/styles/global.sass
Normal file
26
examples/nextjs-api-sales/styles/global.sass
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700')
|
||||
$family-sans-serif: "Roboto", sans-serif
|
||||
|
||||
#__next
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: flex-start
|
||||
align-items: stretch
|
||||
height: 100vh
|
||||
--bg-color: #f5f5f5
|
||||
|
||||
.logo
|
||||
padding: 0.75rem
|
||||
|
||||
@import "../node_modules/bulma/bulma.sass"
|
||||
@import "../node_modules/react-notifications-component/dist/theme.css"
|
||||
|
||||
// applied after bulma styles are enabled
|
||||
html
|
||||
overflow-y: auto
|
||||
|
||||
.navbar
|
||||
background-color: var(--bg-color)
|
||||
color: white
|
||||
30
examples/nextjs-api-sales/styles/home.module.css
Normal file
30
examples/nextjs-api-sales/styles/home.module.css
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
.container {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5rem 2rem 0;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tableSection {
|
||||
padding: 2rem;
|
||||
background: var(--bg-color);
|
||||
width: 800px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.table table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tableSection h1 {
|
||||
text-align: center;
|
||||
color: black;
|
||||
}
|
||||
20
examples/nextjs-api-sales/styles/save.module.css
Normal file
20
examples/nextjs-api-sales/styles/save.module.css
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
.container {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5rem 2rem 0;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.formSection {
|
||||
padding: 2rem;
|
||||
background: var(--bg-color);
|
||||
width: 400px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.formSection h1 {
|
||||
text-align: center;
|
||||
color: black;
|
||||
}
|
||||
20
examples/nextjs-api-sales/tsconfig.json
Normal file
20
examples/nextjs-api-sales/tsconfig.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
82
examples/nextjs-api-sales/utilities/index.ts
Normal file
82
examples/nextjs-api-sales/utilities/index.ts
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import { App, AppSearch, Table, TableSearch } from "../definitions"
|
||||
import getConfig from "next/config"
|
||||
|
||||
const { serverRuntimeConfig } = getConfig()
|
||||
const apiKey = serverRuntimeConfig["apiKey"]
|
||||
const appName = serverRuntimeConfig["appName"]
|
||||
const host = serverRuntimeConfig["host"]
|
||||
|
||||
let APP: App | null = null
|
||||
let TABLES: { [key: string]: Table } = {}
|
||||
|
||||
export async function makeCall(
|
||||
method: string,
|
||||
url: string,
|
||||
opts?: { body?: any; appId?: string }
|
||||
): Promise<any> {
|
||||
const fetchOpts: any = {
|
||||
method,
|
||||
headers: {
|
||||
"x-budibase-api-key": apiKey,
|
||||
},
|
||||
}
|
||||
if (opts?.appId) {
|
||||
fetchOpts.headers["x-budibase-app-id"] = opts.appId
|
||||
}
|
||||
if (opts?.body) {
|
||||
fetchOpts.body =
|
||||
typeof opts.body !== "string" ? JSON.stringify(opts.body) : opts.body
|
||||
fetchOpts.headers["Content-Type"] = "application/json"
|
||||
}
|
||||
const finalUrl = `${host}/api/public/v1/${url}`
|
||||
const response = await fetch(finalUrl, fetchOpts)
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
} else {
|
||||
const error = await response.text()
|
||||
console.error("Budibase server error - ", error)
|
||||
throw new Error(error)
|
||||
}
|
||||
}
|
||||
|
||||
export async function getApp(): Promise<App> {
|
||||
if (APP) {
|
||||
return APP
|
||||
}
|
||||
const apps: AppSearch = await makeCall("post", "applications/search", {
|
||||
body: {
|
||||
name: appName,
|
||||
},
|
||||
})
|
||||
const app = apps.data.find((app: App) => app.name === appName)
|
||||
if (!app) {
|
||||
throw new Error(
|
||||
"Could not find app, please make sure app name in config is correct."
|
||||
)
|
||||
}
|
||||
APP = app
|
||||
return app
|
||||
}
|
||||
|
||||
export async function findTable(
|
||||
appId: string,
|
||||
tableName: string
|
||||
): Promise<Table> {
|
||||
if (TABLES[tableName]) {
|
||||
return TABLES[tableName]
|
||||
}
|
||||
const tables: TableSearch = await makeCall("post", "tables/search", {
|
||||
body: {
|
||||
name: tableName,
|
||||
},
|
||||
appId,
|
||||
})
|
||||
const table = tables.data.find((table: Table) => table.name === tableName)
|
||||
if (!table) {
|
||||
throw new Error(
|
||||
"Could not find table, please make sure your app is configured with the Postgres datasource correctly."
|
||||
)
|
||||
}
|
||||
TABLES[tableName] = table
|
||||
return table
|
||||
}
|
||||
3086
examples/nextjs-api-sales/yarn.lock
Normal file
3086
examples/nextjs-api-sales/yarn.lock
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -12,7 +12,7 @@ All ports are BLOCKED except 22 (SSH), 80 (HTTP), 443 (HTTPS), and 10000
|
|||
|
||||
* Budibase website: http://budibase.com
|
||||
|
||||
For help and more information, visit https://docs.budibase.com/self-hosting/hosting-methods/digitalocean
|
||||
For help and more information, visit https://docs.budibase.com/docs/digitalocean
|
||||
|
||||
********************************************************************************
|
||||
To delete this message of the day: rm -rf $(readlink -f ${0})
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ version: "3"
|
|||
services:
|
||||
minio-service:
|
||||
container_name: budi-minio-dev
|
||||
restart: always
|
||||
restart: on-failure
|
||||
image: minio/minio
|
||||
volumes:
|
||||
- minio_data:/data
|
||||
|
|
@ -23,7 +23,7 @@ services:
|
|||
|
||||
proxy-service:
|
||||
container_name: budi-nginx-dev
|
||||
restart: always
|
||||
restart: on-failure
|
||||
image: nginx:latest
|
||||
volumes:
|
||||
- ./.generated-nginx.dev.conf:/etc/nginx/nginx.conf
|
||||
|
|
@ -38,7 +38,7 @@ services:
|
|||
couchdb-service:
|
||||
# platform: linux/amd64
|
||||
container_name: budi-couchdb-dev
|
||||
restart: always
|
||||
restart: on-failure
|
||||
image: ibmcom/couchdb3
|
||||
environment:
|
||||
- COUCHDB_PASSWORD=${COUCH_DB_PASSWORD}
|
||||
|
|
@ -59,7 +59,7 @@ services:
|
|||
|
||||
redis-service:
|
||||
container_name: budi-redis-dev
|
||||
restart: always
|
||||
restart: on-failure
|
||||
image: redis
|
||||
command: redis-server --requirepass ${REDIS_PASSWORD}
|
||||
ports:
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version: "3"
|
|||
|
||||
services:
|
||||
app-service:
|
||||
restart: always
|
||||
restart: unless-stopped
|
||||
image: budibase.docker.scarf.sh/budibase/apps
|
||||
container_name: bbapps
|
||||
environment:
|
||||
|
|
@ -28,7 +28,7 @@ services:
|
|||
- redis-service
|
||||
|
||||
worker-service:
|
||||
restart: always
|
||||
restart: unless-stopped
|
||||
image: budibase.docker.scarf.sh/budibase/worker
|
||||
container_name: bbworker
|
||||
environment:
|
||||
|
|
@ -53,7 +53,7 @@ services:
|
|||
- couch-init
|
||||
|
||||
minio-service:
|
||||
restart: always
|
||||
restart: unless-stopped
|
||||
image: minio/minio
|
||||
volumes:
|
||||
- minio_data:/data
|
||||
|
|
@ -69,7 +69,7 @@ services:
|
|||
retries: 3
|
||||
|
||||
proxy-service:
|
||||
restart: always
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "${MAIN_PORT}:10000"
|
||||
container_name: bbproxy
|
||||
|
|
@ -81,7 +81,7 @@ services:
|
|||
- couchdb-service
|
||||
|
||||
couchdb-service:
|
||||
restart: always
|
||||
restart: unless-stopped
|
||||
image: ibmcom/couchdb3
|
||||
environment:
|
||||
- COUCHDB_PASSWORD=${COUCH_DB_PASSWORD}
|
||||
|
|
@ -98,13 +98,14 @@ services:
|
|||
command: ["sh","-c","sleep 10 && $${PUT_CALL}/_users && $${PUT_CALL}/_replicator; fg;"]
|
||||
|
||||
redis-service:
|
||||
restart: always
|
||||
restart: unless-stopped
|
||||
image: redis
|
||||
command: redis-server --requirepass ${REDIS_PASSWORD}
|
||||
volumes:
|
||||
- redis_data:/data
|
||||
|
||||
watchtower-service:
|
||||
restart: always
|
||||
image: containrrr/watchtower
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
|
|
|
|||
|
|
@ -52,9 +52,8 @@ http {
|
|||
proxy_pass http://{{ address }}:4001;
|
||||
}
|
||||
|
||||
location /app/ {
|
||||
location /app {
|
||||
proxy_pass http://{{ address }}:4001;
|
||||
rewrite ^/app/(.*)$ /$1 break;
|
||||
}
|
||||
|
||||
location /builder {
|
||||
|
|
@ -76,6 +75,7 @@ http {
|
|||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_set_header Host $http_host;
|
||||
|
||||
proxy_connect_timeout 300;
|
||||
proxy_http_version 1.1;
|
||||
|
|
@ -91,4 +91,4 @@ http {
|
|||
gzip off;
|
||||
gzip_comp_level 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,18 +19,11 @@ http {
|
|||
tcp_nodelay on;
|
||||
server_tokens off;
|
||||
types_hash_max_size 2048;
|
||||
{{#if compose}}
|
||||
resolver 127.0.0.11 ipv6=off;
|
||||
{{/if}}
|
||||
{{#if k8s}}
|
||||
resolver kube-dns.kube-system.svc.cluster.local valid=10s;
|
||||
{{/if}}
|
||||
|
||||
resolver {{ resolver }} valid=10s ipv6=off;
|
||||
|
||||
# buffering
|
||||
client_body_buffer_size 1K;
|
||||
client_header_buffer_size 1k;
|
||||
client_max_body_size 10M;
|
||||
client_max_body_size 20M;
|
||||
ignore_invalid_headers off;
|
||||
proxy_buffering off;
|
||||
|
||||
|
|
@ -55,7 +48,7 @@ http {
|
|||
add_header X-Frame-Options SAMEORIGIN always;
|
||||
add_header X-Content-Type-Options nosniff always;
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.budi.live https://js.intercomcdn.com https://widget.intercom.io; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com https://rsms.me https://maxcdn.bootstrapcdn.com; object-src 'none'; base-uri 'self'; connect-src 'self' https://api-iam.intercom.io https://app.posthog.com wss://nexus-websocket-a.intercom.io; font-src 'self' data https://cdn.jsdelivr.net https://fonts.gstatic.com https://rsms.me https://maxcdn.bootstrapcdn.com; frame-src 'self'; img-src http: https: data; manifest-src 'self'; media-src 'self'; worker-src 'none';" always;
|
||||
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.budi.live https://js.intercomcdn.com https://widget.intercom.io; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com https://rsms.me https://maxcdn.bootstrapcdn.com; object-src 'none'; base-uri 'self'; connect-src 'self' https://api-iam.intercom.io https://app.posthog.com wss://nexus-websocket-a.intercom.io ; font-src 'self' data https://cdn.jsdelivr.net https://fonts.gstatic.com https://rsms.me https://maxcdn.bootstrapcdn.com; frame-src 'self' https:; img-src http: https: data; manifest-src 'self'; media-src 'self'; worker-src 'none';" always;
|
||||
|
||||
# upstreams
|
||||
set $apps {{ apps }};
|
||||
|
|
@ -68,7 +61,6 @@ http {
|
|||
|
||||
location /app {
|
||||
proxy_pass http://$apps:4002;
|
||||
rewrite ^/app/(.*)$ /$1 break;
|
||||
}
|
||||
|
||||
location = / {
|
||||
|
|
|
|||
|
|
@ -1,145 +0,0 @@
|
|||
user nginx;
|
||||
error_log /var/log/nginx/error.log debug;
|
||||
pid /var/run/nginx.pid;
|
||||
worker_processes auto;
|
||||
worker_rlimit_nofile 33282;
|
||||
|
||||
events {
|
||||
worker_connections 1024;
|
||||
}
|
||||
|
||||
http {
|
||||
limit_req_zone $binary_remote_addr zone=ratelimit:10m rate=20r/s;
|
||||
include /etc/nginx/mime.types;
|
||||
default_type application/octet-stream;
|
||||
charset utf-8;
|
||||
sendfile on;
|
||||
tcp_nopush on;
|
||||
tcp_nodelay on;
|
||||
server_tokens off;
|
||||
types_hash_max_size 2048;
|
||||
|
||||
# buffering
|
||||
client_body_buffer_size 1K;
|
||||
client_header_buffer_size 1k;
|
||||
client_max_body_size 1k;
|
||||
ignore_invalid_headers off;
|
||||
|
||||
|
||||
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
|
||||
'$status $body_bytes_sent "$http_referer" '
|
||||
'"$http_user_agent" "$http_x_forwarded_for"';
|
||||
|
||||
map $http_upgrade $connection_upgrade {
|
||||
default "upgrade";
|
||||
}
|
||||
|
||||
server {
|
||||
listen 10000 default_server;
|
||||
listen [::]:10000 default_server;
|
||||
server_name _;
|
||||
client_max_body_size 1000m;
|
||||
ignore_invalid_headers off;
|
||||
proxy_buffering off;
|
||||
port_in_redirect off;
|
||||
|
||||
# Security Headers
|
||||
add_header X-Frame-Options SAMEORIGIN always;
|
||||
add_header X-Content-Type-Options nosniff always;
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.budi.live https://js.intercomcdn.com https://widget.intercom.io; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com https://rsms.me; object-src 'none'; base-uri 'self'; connect-src 'self' https://api-iam.intercom.io https://app.posthog.com wss://nexus-websocket-a.intercom.io; font-src 'self' data: https://cdn.jsdelivr.net https://fonts.gstatic.com https://rsms.me; frame-src 'self'; img-src http: https: data:; manifest-src 'self'; media-src 'self'; worker-src 'none';" always;
|
||||
|
||||
location /app {
|
||||
proxy_pass http://app-service:4002;
|
||||
rewrite ^/app/(.*)$ /$1 break;
|
||||
}
|
||||
|
||||
location = / {
|
||||
port_in_redirect off;
|
||||
proxy_pass http://app-service:4002;
|
||||
}
|
||||
|
||||
location = /v1/update {
|
||||
proxy_pass http://watchtower-service:8080;
|
||||
}
|
||||
|
||||
location /builder/ {
|
||||
port_in_redirect off;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Connection $connection_upgrade;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_pass http://app-service:4002;
|
||||
}
|
||||
|
||||
location ~ ^/(builder|app_) {
|
||||
port_in_redirect off;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Connection $connection_upgrade;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_pass http://app-service:4002;
|
||||
}
|
||||
|
||||
location ~ ^/api/(system|admin|global)/ {
|
||||
proxy_pass http://worker-service:4003;
|
||||
}
|
||||
|
||||
location /worker/ {
|
||||
proxy_pass http://worker-service:4003;
|
||||
rewrite ^/worker/(.*)$ /$1 break;
|
||||
}
|
||||
|
||||
location /api/ {
|
||||
# calls to the API are rate limited with bursting
|
||||
limit_req zone=ratelimit burst=20 nodelay;
|
||||
|
||||
# 120s timeout on API requests
|
||||
proxy_read_timeout 120s;
|
||||
proxy_connect_timeout 120s;
|
||||
proxy_send_timeout 120s;
|
||||
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Connection $connection_upgrade;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
|
||||
proxy_pass http://app-service:4002;
|
||||
}
|
||||
|
||||
location /db/ {
|
||||
proxy_pass http://couchdb-service:5984;
|
||||
rewrite ^/db/(.*)$ /$1 break;
|
||||
}
|
||||
|
||||
location / {
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_set_header Host $http_host;
|
||||
|
||||
proxy_connect_timeout 300;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Connection "";
|
||||
chunked_transfer_encoding off;
|
||||
proxy_pass http://minio-service:9000;
|
||||
}
|
||||
|
||||
client_header_timeout 60;
|
||||
client_body_timeout 60;
|
||||
keepalive_timeout 60;
|
||||
|
||||
# gzip
|
||||
gzip on;
|
||||
gzip_vary on;
|
||||
gzip_proxied any;
|
||||
gzip_comp_level 6;
|
||||
gzip_types text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;
|
||||
}
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
</p>
|
||||
|
||||
<h3 align="center">
|
||||
<a href="https://docs.budibase.com/getting-started">Los Geht's</a>
|
||||
<a href="https://docs.budibase.com/docs/quickstart-tutorials">Los Geht's</a>
|
||||
<span> · </span>
|
||||
<a href="https://docs.budibase.com">Dokumentation</a>
|
||||
<span> · </span>
|
||||
|
|
@ -109,7 +109,7 @@ $ budi hosting --start
|
|||
4. Lege einen Admin-Benutzer an.
|
||||
Gib die E-Mail und das Passwort für den neuen Admin-Benutzer ein.
|
||||
|
||||
Schon geschafft! Jetzt kann es losgehen mit der minutenschnellen Entwicklung deiner Tools. Für weitere Informationen und Tipps schau doch mal in unsere [Dokumentation](https://docs.budibase.com/getting-started).
|
||||
Schon geschafft! Jetzt kann es losgehen mit der minutenschnellen Entwicklung deiner Tools. Für weitere Informationen und Tipps schau doch mal in unsere [Dokumentation](https://docs.budibase.com/docs/quickstart-tutorials).
|
||||
|
||||
<br />
|
||||
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ The Budibase builder runs in Electron, on Mac, PC and Linux. Follow the steps be
|
|||
|
||||
Budibase wants to make sure anyone can use the tools we develop and we know a lot of people need to be able to host the apps they make on their own systems - that is why we've decided to try and make self hosting as easy as possible!
|
||||
|
||||
Currently, you can host your apps using Docker or Digital Ocean. The documentation for self-hosting can be found [here](https://docs.budibase.com/self-hosting/introduction-to-self-hosting).
|
||||
Currently, you can host your apps using Docker or Digital Ocean. The documentation for self-hosting can be found [here](https://docs.budibase.com/docs/hosting-methods).
|
||||
|
||||
[](https://cloud.digitalocean.com/droplets/new?onboarding_origin=marketplace&i=09038e&fleetUuid=bb04f9c8-1de8-4687-b2ae-1d5177a0535b&appId=77729671&type=applications&size=s-4vcpu-8gb®ion=nyc1&refcode=0caaa6085a82&image=budibase-20-04)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version": "1.0.74-alpha.0",
|
||||
"version": "1.0.98-alpha.1",
|
||||
"npmClient": "yarn",
|
||||
"packages": [
|
||||
"packages/*"
|
||||
|
|
|
|||
29
package.json
29
package.json
|
|
@ -15,7 +15,9 @@
|
|||
"prettier-plugin-svelte": "^2.3.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup-plugin-replace": "^2.2.0",
|
||||
"svelte": "^3.38.2"
|
||||
"svelte": "^3.38.2",
|
||||
"@typescript-eslint/parser": "4.28.0",
|
||||
"typescript": "4.5.5"
|
||||
},
|
||||
"scripts": {
|
||||
"setup": "node ./hosting/scripts/setup.js && yarn && yarn bootstrap && yarn build && yarn dev",
|
||||
|
|
@ -31,24 +33,27 @@
|
|||
"nuke:docker": "lerna run --parallel dev:stack:nuke",
|
||||
"clean": "lerna clean",
|
||||
"kill-port": "kill-port 4001",
|
||||
"dev": "yarn run kill-port && lerna link && lerna run --parallel dev:builder --concurrency 1",
|
||||
"dev:noserver": "lerna link && lerna run dev:stack:up && lerna run --parallel dev:builder --concurrency 1 --ignore @budibase/server --ignore @budibase/worker",
|
||||
"dev:server": "lerna run --parallel dev:builder --concurrency 1 --scope @budibase/worker --scope @budibase/server",
|
||||
"kill-builder": "kill-port 3000",
|
||||
"kill-server": "kill-port 4001 4002",
|
||||
"kill-all": "yarn run kill-builder && yarn run kill-server",
|
||||
"dev": "yarn run kill-all && lerna link && lerna run --parallel dev:builder --concurrency 1",
|
||||
"dev:noserver": "yarn run kill-builder && lerna link && lerna run dev:stack:up && lerna run --parallel dev:builder --concurrency 1 --ignore @budibase/server --ignore @budibase/worker",
|
||||
"dev:server": "yarn run kill-server && lerna run --parallel dev:builder --concurrency 1 --scope @budibase/worker --scope @budibase/server",
|
||||
"test": "lerna run test",
|
||||
"lint:eslint": "eslint packages",
|
||||
"lint:prettier": "prettier --check \"packages/**/*.{js,ts,svelte}\"",
|
||||
"lint": "yarn run lint:eslint && yarn run lint:prettier",
|
||||
"lint:fix:eslint": "eslint --fix packages",
|
||||
"lint:fix:prettier": "prettier --write \"packages/**/*.{js,ts,svelte}\"",
|
||||
"lint:fix:ts": "lerna run lint:fix",
|
||||
"lint:fix": "yarn run lint:fix:ts && yarn run lint:fix:prettier && yarn run lint:fix:eslint",
|
||||
"test:e2e": "lerna run cy:test",
|
||||
"test:e2e:ci": "lerna run cy:ci",
|
||||
"lint:fix:prettier": "prettier --write \"packages/**/*.{js,ts,svelte}\" && prettier --write \"examples/**/*.{js,ts,svelte}\"",
|
||||
"lint:fix": "yarn run lint:fix:prettier && yarn run lint:fix:eslint",
|
||||
"test:e2e": "lerna run cy:test --stream",
|
||||
"test:e2e:ci": "lerna run cy:ci --stream",
|
||||
"build:specs": "lerna run specs",
|
||||
"build:docker": "lerna run build:docker && npm run build:docker:proxy:compose && cd hosting/scripts/linux/ && ./release-to-docker-hub.sh $BUDIBASE_RELEASE_VERSION && cd -",
|
||||
"build:docker:proxy": "docker build hosting/proxy -t proxy-service",
|
||||
"build:docker:proxy:compose": "lerna run generate:proxy:compose && npm run build:docker:proxy",
|
||||
"build:docker:proxy:preprod": "lerna run generate:proxy:preprod && npm run build:docker:proxy",
|
||||
"build:docker:proxy:prod": "lerna run generate:proxy:prod && npm run build:docker:proxy",
|
||||
"build:docker:proxy:compose": "node scripts/proxy/generateProxyConfig compose && npm run build:docker:proxy",
|
||||
"build:docker:proxy:preprod": "node scripts/proxy/generateProxyConfig preprod && npm run build:docker:proxy",
|
||||
"build:docker:proxy:prod": "node scripts/proxy/generateProxyConfig prod && npm run build:docker:proxy",
|
||||
"build:docker:selfhost": "lerna run build:docker && cd hosting/scripts/linux/ && ./release-to-docker-hub.sh latest && cd -",
|
||||
"build:docker:develop": "node scripts/pinVersions && lerna run build:docker && npm run build:docker:proxy:compose && cd hosting/scripts/linux/ && ./release-to-docker-hub.sh develop && cd -",
|
||||
"build:docker:airgap": "node hosting/scripts/airgapped/airgappedDockerBuild",
|
||||
|
|
|
|||
1
packages/backend-core/encryption.js
Normal file
1
packages/backend-core/encryption.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
module.exports = require("./src/security/encryption")
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@budibase/backend-core",
|
||||
"version": "1.0.74-alpha.0",
|
||||
"version": "1.0.98-alpha.1",
|
||||
"description": "Budibase backend core libraries used in server and worker",
|
||||
"main": "src/index.js",
|
||||
"author": "Budibase",
|
||||
|
|
|
|||
9
packages/backend-core/src/cache/user.js
vendored
9
packages/backend-core/src/cache/user.js
vendored
|
|
@ -32,11 +32,10 @@ const populateFromDB = async (userId, tenantId) => {
|
|||
* @param {*} populateUser function to provide the user for re-caching. default to couch db
|
||||
* @returns
|
||||
*/
|
||||
exports.getUser = async (
|
||||
userId,
|
||||
tenantId = null,
|
||||
populateUser = populateFromDB
|
||||
) => {
|
||||
exports.getUser = async (userId, tenantId = null, populateUser = null) => {
|
||||
if (!populateUser) {
|
||||
populateUser = populateFromDB
|
||||
}
|
||||
if (!tenantId) {
|
||||
try {
|
||||
tenantId = getTenantId()
|
||||
|
|
|
|||
|
|
@ -22,3 +22,18 @@ exports.getAccount = async email => {
|
|||
|
||||
return json[0]
|
||||
}
|
||||
|
||||
exports.getStatus = async () => {
|
||||
const response = await api.get(`/api/status`, {
|
||||
headers: {
|
||||
[Headers.API_KEY]: env.ACCOUNT_PORTAL_API_KEY,
|
||||
},
|
||||
})
|
||||
const json = await response.json()
|
||||
|
||||
if (response.status !== 200) {
|
||||
throw new Error(`Error getting status`)
|
||||
}
|
||||
|
||||
return json
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
const env = require("../environment")
|
||||
const { Headers } = require("../../constants")
|
||||
const { SEPARATOR, DocumentTypes } = require("../db/constants")
|
||||
const cls = require("./FunctionContext")
|
||||
const { getCouch } = require("../db")
|
||||
const { getProdAppID, getDevelopmentAppID } = require("../db/conversions")
|
||||
|
|
@ -42,8 +43,39 @@ exports.doInTenant = (tenantId, task) => {
|
|||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Given an app ID this will attempt to retrieve the tenant ID from it.
|
||||
* @return {null|string} The tenant ID found within the app ID.
|
||||
*/
|
||||
exports.getTenantIDFromAppID = appId => {
|
||||
if (!appId) {
|
||||
return null
|
||||
}
|
||||
const split = appId.split(SEPARATOR)
|
||||
const hasDev = split[1] === DocumentTypes.DEV
|
||||
if ((hasDev && split.length === 3) || (!hasDev && split.length === 2)) {
|
||||
return null
|
||||
}
|
||||
if (hasDev) {
|
||||
return split[2]
|
||||
} else {
|
||||
return split[1]
|
||||
}
|
||||
}
|
||||
|
||||
const setAppTenantId = appId => {
|
||||
const appTenantId = this.getTenantIDFromAppID(appId) || this.DEFAULT_TENANT_ID
|
||||
this.updateTenantId(appTenantId)
|
||||
}
|
||||
|
||||
exports.doInAppContext = (appId, task) => {
|
||||
if (!appId) {
|
||||
throw new Error("appId is required")
|
||||
}
|
||||
return cls.run(() => {
|
||||
// set the app tenant id
|
||||
setAppTenantId(appId)
|
||||
|
||||
// set the app ID
|
||||
cls.setOnContext(ContextKeys.APP_ID, appId)
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ exports.DocumentTypes = {
|
|||
APP_METADATA: `${PRE_APP}${exports.SEPARATOR}metadata`,
|
||||
ROLE: "role",
|
||||
MIGRATIONS: "migrations",
|
||||
DEV_INFO: "devinfo",
|
||||
}
|
||||
|
||||
exports.StaticDatabases = {
|
||||
|
|
|
|||
|
|
@ -9,11 +9,7 @@ const {
|
|||
APP_PREFIX,
|
||||
APP_DEV,
|
||||
} = require("./constants")
|
||||
const {
|
||||
getTenantId,
|
||||
getTenantIDFromAppID,
|
||||
getGlobalDBName,
|
||||
} = require("../tenancy")
|
||||
const { getTenantId, getGlobalDBName } = require("../tenancy")
|
||||
const fetch = require("node-fetch")
|
||||
const { getCouch } = require("./index")
|
||||
const { getAppMetadata } = require("../cache/appMetadata")
|
||||
|
|
@ -30,6 +26,7 @@ const UNICODE_MAX = "\ufff0"
|
|||
|
||||
exports.ViewNames = {
|
||||
USER_BY_EMAIL: "by_email",
|
||||
BY_API_KEY: "by_api_key",
|
||||
}
|
||||
|
||||
exports.StaticDatabases = StaticDatabases
|
||||
|
|
@ -38,7 +35,6 @@ exports.DocumentTypes = DocumentTypes
|
|||
exports.APP_PREFIX = APP_PREFIX
|
||||
exports.APP_DEV = exports.APP_DEV_PREFIX = APP_DEV
|
||||
exports.SEPARATOR = SEPARATOR
|
||||
exports.getTenantIDFromAppID = getTenantIDFromAppID
|
||||
exports.isDevApp = isDevApp
|
||||
exports.isProdAppID = isProdAppID
|
||||
exports.isDevAppID = isDevAppID
|
||||
|
|
@ -67,6 +63,7 @@ function getDocParams(docType, docId = null, otherProps = {}) {
|
|||
endkey: `${docType}${SEPARATOR}${docId}${UNICODE_MAX}`,
|
||||
}
|
||||
}
|
||||
exports.getDocParams = getDocParams
|
||||
|
||||
/**
|
||||
* Generates a new workspace ID.
|
||||
|
|
@ -339,6 +336,14 @@ const getConfigParams = ({ type, workspace, user }, otherProps = {}) => {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a new dev info document ID - this is scoped to a user.
|
||||
* @returns {string} The new dev info ID which info for dev (like api key) can be stored under.
|
||||
*/
|
||||
const generateDevInfoID = userId => {
|
||||
return `${DocumentTypes.DEV_INFO}${SEPARATOR}${userId}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the most granular configuration document from the DB based on the type, workspace and userID passed.
|
||||
* @param {Object} db - db instance to query
|
||||
|
|
@ -454,3 +459,4 @@ exports.generateConfigID = generateConfigID
|
|||
exports.getConfigParams = getConfigParams
|
||||
exports.getScopedFullConfig = getScopedFullConfig
|
||||
exports.generateNewUsageQuotaDoc = generateNewUsageQuotaDoc
|
||||
exports.generateDevInfoID = generateDevInfoID
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
const { DocumentTypes, ViewNames } = require("./utils")
|
||||
const { getGlobalDB } = require("../tenancy")
|
||||
|
||||
function DesignDoc() {
|
||||
return {
|
||||
|
|
@ -9,7 +10,8 @@ function DesignDoc() {
|
|||
}
|
||||
}
|
||||
|
||||
exports.createUserEmailView = async db => {
|
||||
exports.createUserEmailView = async () => {
|
||||
const db = getGlobalDB()
|
||||
let designDoc
|
||||
try {
|
||||
designDoc = await db.get("_design/database")
|
||||
|
|
@ -31,3 +33,51 @@ exports.createUserEmailView = async db => {
|
|||
}
|
||||
await db.put(designDoc)
|
||||
}
|
||||
|
||||
exports.createApiKeyView = async () => {
|
||||
const db = getGlobalDB()
|
||||
let designDoc
|
||||
try {
|
||||
designDoc = await db.get("_design/database")
|
||||
} catch (err) {
|
||||
designDoc = DesignDoc()
|
||||
}
|
||||
const view = {
|
||||
map: `function(doc) {
|
||||
if (doc._id.startsWith("${DocumentTypes.DEV_INFO}") && doc.apiKey) {
|
||||
emit(doc.apiKey, doc.userId)
|
||||
}
|
||||
}`,
|
||||
}
|
||||
designDoc.views = {
|
||||
...designDoc.views,
|
||||
[ViewNames.BY_API_KEY]: view,
|
||||
}
|
||||
await db.put(designDoc)
|
||||
}
|
||||
|
||||
exports.queryGlobalView = async (viewName, params, db = null) => {
|
||||
const CreateFuncByName = {
|
||||
[ViewNames.USER_BY_EMAIL]: exports.createUserEmailView,
|
||||
[ViewNames.BY_API_KEY]: exports.createApiKeyView,
|
||||
}
|
||||
// can pass DB in if working with something specific
|
||||
if (!db) {
|
||||
db = getGlobalDB()
|
||||
}
|
||||
try {
|
||||
let response = (await db.query(`database/${viewName}`, params)).rows
|
||||
response = response.map(resp =>
|
||||
params.include_docs ? resp.doc : resp.value
|
||||
)
|
||||
return response.length <= 1 ? response[0] : response
|
||||
} catch (err) {
|
||||
if (err != null && err.name === "not_found") {
|
||||
const createFunc = CreateFuncByName[viewName]
|
||||
await createFunc()
|
||||
return exports.queryGlobalView(viewName, params)
|
||||
} else {
|
||||
throw err
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
const {
|
||||
isMultiTenant,
|
||||
updateTenantId,
|
||||
isTenantIdSet,
|
||||
DEFAULT_TENANT_ID,
|
||||
updateAppId,
|
||||
} = require("../tenancy")
|
||||
const ContextFactory = require("../context/FunctionContext")
|
||||
const { getTenantIDFromAppID } = require("../db/utils")
|
||||
|
||||
module.exports = () => {
|
||||
return ContextFactory.getMiddleware(ctx => {
|
||||
// if not in multi-tenancy mode make sure its default and exit
|
||||
if (!isMultiTenant()) {
|
||||
updateTenantId(DEFAULT_TENANT_ID)
|
||||
return
|
||||
}
|
||||
// if tenant ID already set no need to continue
|
||||
if (isTenantIdSet()) {
|
||||
return
|
||||
}
|
||||
const appId = ctx.appId ? ctx.appId : ctx.user ? ctx.user.appId : null
|
||||
const tenantId = getTenantIDFromAppID(appId) || DEFAULT_TENANT_ID
|
||||
updateTenantId(tenantId)
|
||||
updateAppId(appId)
|
||||
})
|
||||
}
|
||||
|
|
@ -4,6 +4,9 @@ const { getUser } = require("../cache/user")
|
|||
const { getSession, updateSessionTTL } = require("../security/sessions")
|
||||
const { buildMatcherRegex, matches } = require("./matchers")
|
||||
const env = require("../environment")
|
||||
const { SEPARATOR, ViewNames, queryGlobalView } = require("../../db")
|
||||
const { getGlobalDB, doInTenant } = require("../tenancy")
|
||||
const { decrypt } = require("../security/encryption")
|
||||
|
||||
function finalise(
|
||||
ctx,
|
||||
|
|
@ -16,6 +19,33 @@ function finalise(
|
|||
ctx.version = version
|
||||
}
|
||||
|
||||
async function checkApiKey(apiKey, populateUser) {
|
||||
if (apiKey === env.INTERNAL_API_KEY) {
|
||||
return { valid: true }
|
||||
}
|
||||
const decrypted = decrypt(apiKey)
|
||||
const tenantId = decrypted.split(SEPARATOR)[0]
|
||||
return doInTenant(tenantId, async () => {
|
||||
const db = getGlobalDB()
|
||||
// api key is encrypted in the database
|
||||
const userId = await queryGlobalView(
|
||||
ViewNames.BY_API_KEY,
|
||||
{
|
||||
key: apiKey,
|
||||
},
|
||||
db
|
||||
)
|
||||
if (userId) {
|
||||
return {
|
||||
valid: true,
|
||||
user: await getUser(userId, tenantId, populateUser),
|
||||
}
|
||||
} else {
|
||||
throw "Invalid API key"
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* This middleware is tenancy aware, so that it does not depend on other middlewares being used.
|
||||
* The tenancy modules should not be used here and it should be assumed that the tenancy context
|
||||
|
|
@ -79,9 +109,19 @@ module.exports = (
|
|||
const apiKey = ctx.request.headers[Headers.API_KEY]
|
||||
const tenantId = ctx.request.headers[Headers.TENANT_ID]
|
||||
// this is an internal request, no user made it
|
||||
if (!authenticated && apiKey && apiKey === env.INTERNAL_API_KEY) {
|
||||
authenticated = true
|
||||
internal = true
|
||||
if (!authenticated && apiKey) {
|
||||
const populateUser = opts.populateUser ? opts.populateUser(ctx) : null
|
||||
const { valid, user: foundUser } = await checkApiKey(
|
||||
apiKey,
|
||||
populateUser
|
||||
)
|
||||
if (valid && foundUser) {
|
||||
authenticated = true
|
||||
user = foundUser
|
||||
} else if (valid) {
|
||||
authenticated = true
|
||||
internal = true
|
||||
}
|
||||
}
|
||||
if (!user && tenantId) {
|
||||
user = { tenantId }
|
||||
|
|
@ -101,6 +141,7 @@ module.exports = (
|
|||
// allow configuring for public access
|
||||
if ((opts && opts.publicAllowed) || publicEndpoint) {
|
||||
finalise(ctx, { authenticated: false, version, publicEndpoint })
|
||||
return next()
|
||||
} else {
|
||||
ctx.throw(err.status || 403, err)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ const { authError } = require("./passport/utils")
|
|||
const authenticated = require("./authenticated")
|
||||
const auditLog = require("./auditLog")
|
||||
const tenancy = require("./tenancy")
|
||||
const appTenancy = require("./appTenancy")
|
||||
const internalApi = require("./internalApi")
|
||||
const datasourceGoogle = require("./passport/datasource/google")
|
||||
const csrf = require("./csrf")
|
||||
|
|
@ -19,7 +18,6 @@ module.exports = {
|
|||
authenticated,
|
||||
auditLog,
|
||||
tenancy,
|
||||
appTenancy,
|
||||
authError,
|
||||
internalApi,
|
||||
datasource: {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const runMigration = async (CouchDB, migration, options = {}) => {
|
|||
if (migrationType === exports.MIGRATION_TYPES.GLOBAL) {
|
||||
dbNames = [getGlobalDBName()]
|
||||
} else if (migrationType === exports.MIGRATION_TYPES.APP) {
|
||||
const apps = await getAllApps(CouchDB, migration.opts)
|
||||
const apps = await getAllApps(migration.opts)
|
||||
dbNames = apps.map(app => app.appId)
|
||||
} else {
|
||||
throw new Error(
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@ exports.ObjectStore = bucket => {
|
|||
const config = {
|
||||
s3ForcePathStyle: true,
|
||||
signatureVersion: "v4",
|
||||
apiVersion: "2006-03-01",
|
||||
params: {
|
||||
Bucket: sanitizeBucket(bucket),
|
||||
},
|
||||
|
|
@ -102,17 +103,21 @@ exports.makeSureBucketExists = async (client, bucketName) => {
|
|||
.promise()
|
||||
} catch (err) {
|
||||
const promises = STATE.bucketCreationPromises
|
||||
const doesntExist = err.statusCode === 404,
|
||||
noAccess = err.statusCode === 403
|
||||
if (promises[bucketName]) {
|
||||
await promises[bucketName]
|
||||
} else if (err.statusCode === 404) {
|
||||
// bucket doesn't exist create it
|
||||
promises[bucketName] = client
|
||||
.createBucket({
|
||||
Bucket: bucketName,
|
||||
})
|
||||
.promise()
|
||||
await promises[bucketName]
|
||||
delete promises[bucketName]
|
||||
} else if (doesntExist || noAccess) {
|
||||
if (doesntExist) {
|
||||
// bucket doesn't exist create it
|
||||
promises[bucketName] = client
|
||||
.createBucket({
|
||||
Bucket: bucketName,
|
||||
})
|
||||
.promise()
|
||||
await promises[bucketName]
|
||||
delete promises[bucketName]
|
||||
}
|
||||
// public buckets are quite hidden in the system, make sure
|
||||
// no bucket is set accidentally
|
||||
if (PUBLIC_BUCKETS.includes(bucketName)) {
|
||||
|
|
@ -124,7 +129,7 @@ exports.makeSureBucketExists = async (client, bucketName) => {
|
|||
.promise()
|
||||
}
|
||||
} else {
|
||||
throw err
|
||||
throw new Error("Unable to write to object store bucket.")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,12 +22,25 @@ exports.Databases = {
|
|||
exports.SEPARATOR = SEPARATOR
|
||||
|
||||
exports.getRedisOptions = (clustered = false) => {
|
||||
const [host, port, ...rest] = REDIS_URL.split(":")
|
||||
let password = REDIS_PASSWORD
|
||||
let url = REDIS_URL.split("//")
|
||||
// get rid of the protocol
|
||||
url = url.length > 1 ? url[1] : url[0]
|
||||
// check for a password etc
|
||||
url = url.split("@")
|
||||
if (url.length > 1) {
|
||||
// get the password
|
||||
password = url[0].split(":")[1]
|
||||
url = url[1]
|
||||
} else {
|
||||
url = url[0]
|
||||
}
|
||||
const [host, port] = url.split(":")
|
||||
|
||||
let redisProtocolUrl
|
||||
|
||||
// fully qualified redis URL
|
||||
if (rest.length && /rediss?/.test(host)) {
|
||||
if (/rediss?:\/\//.test(REDIS_URL)) {
|
||||
redisProtocolUrl = REDIS_URL
|
||||
}
|
||||
|
||||
|
|
@ -37,13 +50,13 @@ exports.getRedisOptions = (clustered = false) => {
|
|||
if (clustered) {
|
||||
opts.redisOptions = {}
|
||||
opts.redisOptions.tls = {}
|
||||
opts.redisOptions.password = REDIS_PASSWORD
|
||||
opts.redisOptions.password = password
|
||||
opts.slotsRefreshTimeout = SLOT_REFRESH_MS
|
||||
opts.dnsLookup = (address, callback) => callback(null, address)
|
||||
} else {
|
||||
opts.host = host
|
||||
opts.port = port
|
||||
opts.password = REDIS_PASSWORD
|
||||
opts.password = password
|
||||
}
|
||||
return { opts, host, port, redisProtocolUrl }
|
||||
}
|
||||
|
|
|
|||
1
packages/backend-core/src/security/apiKeys.js
Normal file
1
packages/backend-core/src/security/apiKeys.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
exports.lookupApiKey = async () => {}
|
||||
33
packages/backend-core/src/security/encryption.js
Normal file
33
packages/backend-core/src/security/encryption.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
const crypto = require("crypto")
|
||||
const env = require("../environment")
|
||||
|
||||
const ALGO = "aes-256-ctr"
|
||||
const SECRET = env.JWT_SECRET
|
||||
const SEPARATOR = "-"
|
||||
const ITERATIONS = 10000
|
||||
const RANDOM_BYTES = 16
|
||||
const STRETCH_LENGTH = 32
|
||||
|
||||
function stretchString(string, salt) {
|
||||
return crypto.pbkdf2Sync(string, salt, ITERATIONS, STRETCH_LENGTH, "sha512")
|
||||
}
|
||||
|
||||
exports.encrypt = input => {
|
||||
const salt = crypto.randomBytes(RANDOM_BYTES)
|
||||
const stretched = stretchString(SECRET, salt)
|
||||
const cipher = crypto.createCipheriv(ALGO, stretched, salt)
|
||||
const base = cipher.update(input)
|
||||
const final = cipher.final()
|
||||
const encrypted = Buffer.concat([base, final]).toString("hex")
|
||||
return `${salt.toString("hex")}${SEPARATOR}${encrypted}`
|
||||
}
|
||||
|
||||
exports.decrypt = input => {
|
||||
const [salt, encrypted] = input.split(SEPARATOR)
|
||||
const saltBuffer = Buffer.from(salt, "hex")
|
||||
const stretched = stretchString(SECRET, saltBuffer)
|
||||
const decipher = crypto.createDecipheriv(ALGO, stretched, saltBuffer)
|
||||
const base = decipher.update(Buffer.from(encrypted, "hex"))
|
||||
const final = decipher.final()
|
||||
return Buffer.concat([base, final]).toString()
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@ const PermissionLevels = {
|
|||
|
||||
// these are the global types, that govern the underlying default behaviour
|
||||
const PermissionTypes = {
|
||||
APP: "app",
|
||||
TABLE: "table",
|
||||
USER: "user",
|
||||
AUTOMATION: "automation",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
const { getDB } = require("../db")
|
||||
const { SEPARATOR, StaticDatabases, DocumentTypes } = require("../db/constants")
|
||||
const { getTenantId, DEFAULT_TENANT_ID, isMultiTenant } = require("../context")
|
||||
const { SEPARATOR, StaticDatabases } = require("../db/constants")
|
||||
const {
|
||||
getTenantId,
|
||||
DEFAULT_TENANT_ID,
|
||||
isMultiTenant,
|
||||
getTenantIDFromAppID,
|
||||
} = require("../context")
|
||||
const env = require("../environment")
|
||||
|
||||
const TENANT_DOC = StaticDatabases.PLATFORM_INFO.docs.tenants
|
||||
|
|
@ -118,26 +123,6 @@ exports.getTenantUser = async identifier => {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Given an app ID this will attempt to retrieve the tenant ID from it.
|
||||
* @return {null|string} The tenant ID found within the app ID.
|
||||
*/
|
||||
exports.getTenantIDFromAppID = appId => {
|
||||
if (!appId) {
|
||||
return null
|
||||
}
|
||||
const split = appId.split(SEPARATOR)
|
||||
const hasDev = split[1] === DocumentTypes.DEV
|
||||
if ((hasDev && split.length === 3) || (!hasDev && split.length === 2)) {
|
||||
return null
|
||||
}
|
||||
if (hasDev) {
|
||||
return split[2]
|
||||
} else {
|
||||
return split[1]
|
||||
}
|
||||
}
|
||||
|
||||
exports.isUserInAppTenant = (appId, user = null) => {
|
||||
let userTenantId
|
||||
if (user) {
|
||||
|
|
@ -145,7 +130,7 @@ exports.isUserInAppTenant = (appId, user = null) => {
|
|||
} else {
|
||||
userTenantId = getTenantId()
|
||||
}
|
||||
const tenantId = exports.getTenantIDFromAppID(appId) || DEFAULT_TENANT_ID
|
||||
const tenantId = getTenantIDFromAppID(appId) || DEFAULT_TENANT_ID
|
||||
return tenantId === userTenantId
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,10 +3,11 @@ const {
|
|||
SEPARATOR,
|
||||
ViewNames,
|
||||
generateGlobalUserID,
|
||||
getAllApps,
|
||||
} = require("./db/utils")
|
||||
const jwt = require("jsonwebtoken")
|
||||
const { options } = require("./middleware/passport/jwt")
|
||||
const { createUserEmailView } = require("./db/views")
|
||||
const { queryGlobalView } = require("./db/views")
|
||||
const { Headers, UserStatus, Cookies, MAX_VALID_DATE } = require("./constants")
|
||||
const {
|
||||
getGlobalDB,
|
||||
|
|
@ -20,8 +21,10 @@ const { hash } = require("./hashing")
|
|||
const userCache = require("./cache/user")
|
||||
const env = require("./environment")
|
||||
const { getUserSessions, invalidateSessions } = require("./security/sessions")
|
||||
const tenancy = require("./tenancy")
|
||||
|
||||
const APP_PREFIX = DocumentTypes.APP + SEPARATOR
|
||||
const PROD_APP_PREFIX = "/app/"
|
||||
|
||||
function confirmAppId(possibleAppId) {
|
||||
return possibleAppId && possibleAppId.startsWith(APP_PREFIX)
|
||||
|
|
@ -29,16 +32,35 @@ function confirmAppId(possibleAppId) {
|
|||
: undefined
|
||||
}
|
||||
|
||||
async function resolveAppUrl(ctx) {
|
||||
const appUrl = ctx.path.split("/")[2]
|
||||
let possibleAppUrl = `/${appUrl.toLowerCase()}`
|
||||
|
||||
let tenantId = tenancy.getTenantId()
|
||||
if (!env.SELF_HOSTED && ctx.subdomains.length) {
|
||||
// always use the tenant id from the url in cloud
|
||||
tenantId = ctx.subdomains[0]
|
||||
}
|
||||
|
||||
// search prod apps for a url that matches
|
||||
const apps = await tenancy.doInTenant(tenantId, () =>
|
||||
getAllApps({ dev: false })
|
||||
)
|
||||
const app = apps.filter(
|
||||
a => a.url && a.url.toLowerCase() === possibleAppUrl
|
||||
)[0]
|
||||
|
||||
return app && app.appId ? app.appId : undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a request tries to find the appId, which can be located in various places
|
||||
* @param {object} ctx The main request body to look through.
|
||||
* @returns {string|undefined} If an appId was found it will be returned.
|
||||
*/
|
||||
exports.getAppId = ctx => {
|
||||
const options = [ctx.headers[Headers.APP_ID], ctx.params.appId]
|
||||
if (ctx.subdomains) {
|
||||
options.push(ctx.subdomains[1])
|
||||
}
|
||||
exports.getAppIdFromCtx = async ctx => {
|
||||
// look in headers
|
||||
const options = [ctx.headers[Headers.APP_ID]]
|
||||
let appId
|
||||
for (let option of options) {
|
||||
appId = confirmAppId(option)
|
||||
|
|
@ -47,16 +69,24 @@ exports.getAppId = ctx => {
|
|||
}
|
||||
}
|
||||
|
||||
// look in body if can't find it in subdomain
|
||||
// look in body
|
||||
if (!appId && ctx.request.body && ctx.request.body.appId) {
|
||||
appId = confirmAppId(ctx.request.body.appId)
|
||||
}
|
||||
|
||||
// look in the url - dev app
|
||||
let appPath =
|
||||
ctx.request.headers.referrer ||
|
||||
ctx.path.split("/").filter(subPath => subPath.startsWith(APP_PREFIX))
|
||||
if (!appId && appPath.length !== 0) {
|
||||
if (!appId && appPath.length) {
|
||||
appId = confirmAppId(appPath[0])
|
||||
}
|
||||
|
||||
// look in the url - prod app
|
||||
if (!appId && ctx.path.startsWith(PROD_APP_PREFIX)) {
|
||||
appId = confirmAppId(await resolveAppUrl(ctx))
|
||||
}
|
||||
|
||||
return appId
|
||||
}
|
||||
|
||||
|
|
@ -139,25 +169,11 @@ exports.getGlobalUserByEmail = async email => {
|
|||
if (email == null) {
|
||||
throw "Must supply an email address to view"
|
||||
}
|
||||
const db = getGlobalDB()
|
||||
|
||||
try {
|
||||
let users = (
|
||||
await db.query(`database/${ViewNames.USER_BY_EMAIL}`, {
|
||||
key: email.toLowerCase(),
|
||||
include_docs: true,
|
||||
})
|
||||
).rows
|
||||
users = users.map(user => user.doc)
|
||||
return users.length <= 1 ? users[0] : users
|
||||
} catch (err) {
|
||||
if (err != null && err.name === "not_found") {
|
||||
await createUserEmailView(db)
|
||||
return exports.getGlobalUserByEmail(email)
|
||||
} else {
|
||||
throw err
|
||||
}
|
||||
}
|
||||
return queryGlobalView(ViewNames.USER_BY_EMAIL, {
|
||||
key: email.toLowerCase(),
|
||||
include_docs: true,
|
||||
})
|
||||
}
|
||||
|
||||
exports.saveUser = async (
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@budibase/bbui",
|
||||
"description": "A UI solution used in the different Budibase projects.",
|
||||
"version": "1.0.74-alpha.0",
|
||||
"version": "1.0.98-alpha.1",
|
||||
"license": "MPL-2.0",
|
||||
"svelte": "src/index.js",
|
||||
"module": "dist/bbui.es.js",
|
||||
|
|
@ -38,6 +38,7 @@
|
|||
],
|
||||
"dependencies": {
|
||||
"@adobe/spectrum-css-workflow-icons": "^1.2.1",
|
||||
"@budibase/string-templates": "^1.0.98-alpha.1",
|
||||
"@spectrum-css/actionbutton": "^1.0.1",
|
||||
"@spectrum-css/actiongroup": "^1.0.1",
|
||||
"@spectrum-css/avatar": "^3.0.2",
|
||||
|
|
|
|||
|
|
@ -57,3 +57,10 @@
|
|||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.spectrum-Toast {
|
||||
pointer-events: all;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
31
packages/bbui/src/Banner/BannerDisplay.svelte
Normal file
31
packages/bbui/src/Banner/BannerDisplay.svelte
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<script>
|
||||
import "@spectrum-css/toast/dist/index-vars.css"
|
||||
import Portal from "svelte-portal"
|
||||
import { banner } from "../Stores/banner"
|
||||
import Banner from "./Banner.svelte"
|
||||
import { fly } from "svelte/transition"
|
||||
</script>
|
||||
|
||||
<Portal target=".banner-container">
|
||||
<div class="banner">
|
||||
{#if $banner.message}
|
||||
<div transition:fly={{ y: -30 }}>
|
||||
<Banner
|
||||
type={$banner.type}
|
||||
extraButtonText={$banner.extraButtonText}
|
||||
extraButtonAction={$banner.extraButtonAction}
|
||||
on:change={$banner.onChange}
|
||||
>
|
||||
{$banner.message}
|
||||
</Banner>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Portal>
|
||||
|
||||
<style>
|
||||
.banner {
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -29,6 +29,7 @@
|
|||
{disabled}
|
||||
on:click|preventDefault
|
||||
on:mouseover={() => (showTooltip = true)}
|
||||
on:focus={() => (showTooltip = true)}
|
||||
on:mouseleave={() => (showTooltip = false)}
|
||||
>
|
||||
{#if icon}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
export let value
|
||||
export let size = "M"
|
||||
export let spectrumTheme
|
||||
export let alignRight = false
|
||||
|
||||
let open = false
|
||||
|
||||
|
|
@ -133,6 +134,7 @@
|
|||
use:clickOutside={() => (open = false)}
|
||||
transition:fly={{ y: -20, duration: 200 }}
|
||||
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
|
||||
class:spectrum-Popover--align-right={alignRight}
|
||||
>
|
||||
{#each categories as category}
|
||||
<div class="category">
|
||||
|
|
@ -250,6 +252,9 @@
|
|||
align-items: stretch;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
.spectrum-Popover--align-right {
|
||||
right: 0;
|
||||
}
|
||||
.colors {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script>
|
||||
import { slide } from "svelte/transition"
|
||||
import Portal from "svelte-portal"
|
||||
import Button from "../Button/Button.svelte"
|
||||
import Body from "../Typography/Body.svelte"
|
||||
|
|
@ -7,7 +6,9 @@
|
|||
|
||||
export let title
|
||||
export let fillWidth
|
||||
|
||||
let visible = false
|
||||
|
||||
export function show() {
|
||||
if (visible) {
|
||||
return
|
||||
|
|
@ -21,11 +22,27 @@
|
|||
}
|
||||
visible = false
|
||||
}
|
||||
|
||||
const easeInOutQuad = x => {
|
||||
return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2
|
||||
}
|
||||
|
||||
// Use a custom svelte transition here because the built-in slide
|
||||
// transition has a horrible overshoot
|
||||
const slide = () => {
|
||||
return {
|
||||
duration: 360,
|
||||
css: t => {
|
||||
const translation = 100 - Math.round(easeInOutQuad(t) * 100)
|
||||
return `transform: translateY(${translation}%);`
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<Portal>
|
||||
<section class:fillWidth class="drawer" transition:slide>
|
||||
<section class:fillWidth class="drawer" transition:slide|local>
|
||||
<header>
|
||||
<div class="text">
|
||||
<Heading size="XS">{title}</Heading>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,9 @@
|
|||
<use xlink:href="#spectrum-css-icon-Dash100" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="spectrum-Checkbox-label">{text || ""}</span>
|
||||
{#if text}
|
||||
<span class="spectrum-Checkbox-label">{text}</span>
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -54,34 +54,43 @@
|
|||
|
||||
<svelte:window on:keydown={handleKey} />
|
||||
|
||||
<!-- These svelte if statements need to be defined like this. -->
|
||||
<!-- The modal transitions do not work if nested inside more than one "if" -->
|
||||
{#if visible && inline}
|
||||
<div use:focusFirstInput class="spectrum-Modal inline is-open">
|
||||
<slot />
|
||||
</div>
|
||||
{:else if visible}
|
||||
{#if inline}
|
||||
{#if visible}
|
||||
<div use:focusFirstInput class="spectrum-Modal inline is-open">
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<!--
|
||||
We cannot conditionally render the portal as this leads to a missing
|
||||
insertion point when using nested modals. Therefore we just conditionally
|
||||
render the content of the portal.
|
||||
It still breaks the modal animation, but its better than soft bricking the
|
||||
screen.
|
||||
-->
|
||||
<Portal target=".modal-container">
|
||||
<div
|
||||
class="spectrum-Underlay is-open"
|
||||
in:fade={{ duration: 200 }}
|
||||
out:fade|local={{ duration: 200 }}
|
||||
on:mousedown|self={cancel}
|
||||
>
|
||||
<div class="modal-wrapper" on:mousedown|self={cancel}>
|
||||
<div class="modal-inner-wrapper" on:mousedown|self={cancel}>
|
||||
<slot name="outside" />
|
||||
<div
|
||||
use:focusFirstInput
|
||||
class="spectrum-Modal is-open"
|
||||
in:fly={{ y: 30, duration: 200 }}
|
||||
out:fly|local={{ y: 30, duration: 200 }}
|
||||
>
|
||||
<slot />
|
||||
{#if visible}
|
||||
<div
|
||||
class="spectrum-Underlay is-open"
|
||||
in:fade={{ duration: 200 }}
|
||||
out:fade|local={{ duration: 200 }}
|
||||
on:mousedown|self={cancel}
|
||||
>
|
||||
<div class="modal-wrapper" on:mousedown|self={cancel}>
|
||||
<div class="modal-inner-wrapper" on:mousedown|self={cancel}>
|
||||
<slot name="outside" />
|
||||
<div
|
||||
use:focusFirstInput
|
||||
class="spectrum-Modal is-open"
|
||||
in:fly={{ y: 30, duration: 200 }}
|
||||
out:fly|local={{ y: 30, duration: 200 }}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</Portal>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -165,4 +165,8 @@
|
|||
.secondary-action {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.spectrum-Dialog-buttonGroup {
|
||||
padding-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
37
packages/bbui/src/Stores/banner.js
Normal file
37
packages/bbui/src/Stores/banner.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { writable } from "svelte/store"
|
||||
|
||||
export function createBannerStore() {
|
||||
const DEFAULT_CONFIG = {}
|
||||
|
||||
const banner = writable(DEFAULT_CONFIG)
|
||||
|
||||
const show = async (
|
||||
// eslint-disable-next-line
|
||||
config = { message, type, extraButtonText, extraButtonAction, onChange }
|
||||
) => {
|
||||
banner.update(store => {
|
||||
return {
|
||||
...store,
|
||||
...config,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const showStatus = async () => {
|
||||
const config = {
|
||||
message: "Some systems are experiencing issues",
|
||||
type: "negative",
|
||||
extraButtonText: "View Status",
|
||||
extraButtonAction: () => window.open("https://status.budibase.com/"),
|
||||
}
|
||||
|
||||
await show(config)
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe: banner.subscribe,
|
||||
showStatus,
|
||||
}
|
||||
}
|
||||
|
||||
export const banner = createBannerStore()
|
||||
|
|
@ -60,7 +60,7 @@ export const createNotificationStore = () => {
|
|||
}
|
||||
|
||||
function id() {
|
||||
return "_" + Math.random().toString(36).substr(2, 9)
|
||||
return "_" + Math.random().toString(36).slice(2, 9)
|
||||
}
|
||||
|
||||
export const notifications = createNotificationStore()
|
||||
|
|
|
|||
|
|
@ -17,14 +17,16 @@
|
|||
{#each attachments as attachment}
|
||||
{#if isImage(attachment.extension)}
|
||||
<Link quiet target="_blank" href={attachment.url}>
|
||||
<img src={attachment.url} alt={attachment.extension} />
|
||||
<div class="center">
|
||||
<img src={attachment.url} alt={attachment.extension} />
|
||||
</div>
|
||||
</Link>
|
||||
{:else}
|
||||
<Tooltip text={attachment.name} direction="right">
|
||||
<div class="file">
|
||||
<Link quiet target="_blank" href={attachment.url}
|
||||
>{attachment.extension}</Link
|
||||
>
|
||||
<Link quiet target="_blank" href={attachment.url}>
|
||||
{attachment.extension}
|
||||
</Link>
|
||||
</div>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
|
@ -38,12 +40,15 @@
|
|||
height: 32px;
|
||||
max-width: 64px;
|
||||
}
|
||||
.center,
|
||||
.file {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.file {
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
color: var(--spectrum-global-color-gray-800);
|
||||
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||
|
|
|
|||
|
|
@ -7,5 +7,9 @@
|
|||
<style>
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: var(--max-cell-width);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
import AttachmentRenderer from "./AttachmentRenderer.svelte"
|
||||
import ArrayRenderer from "./ArrayRenderer.svelte"
|
||||
import InternalRenderer from "./InternalRenderer.svelte"
|
||||
import { processStringSync } from "@budibase/string-templates"
|
||||
|
||||
export let row
|
||||
export let schema
|
||||
|
|
@ -28,10 +29,33 @@
|
|||
$: type = schema?.type ?? "string"
|
||||
$: customRenderer = customRenderers?.find(x => x.column === schema?.name)
|
||||
$: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
|
||||
$: width = schema?.width || "150px"
|
||||
$: cellValue = getCellValue(value, schema.template)
|
||||
|
||||
const getCellValue = (value, template) => {
|
||||
if (!template) {
|
||||
return value
|
||||
}
|
||||
return processStringSync(template, { value })
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if renderer && (customRenderer || (value != null && value !== ""))}
|
||||
<svelte:component this={renderer} {row} {schema} {value} on:clickrelationship>
|
||||
<slot />
|
||||
</svelte:component>
|
||||
{#if renderer && (customRenderer || (cellValue != null && cellValue !== ""))}
|
||||
<div style="--max-cell-width: {schema.width ? 'none' : '200px'};">
|
||||
<svelte:component
|
||||
this={renderer}
|
||||
{row}
|
||||
{schema}
|
||||
value={cellValue}
|
||||
on:clickrelationship
|
||||
>
|
||||
<slot />
|
||||
</svelte:component>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: contents;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,3 +3,12 @@
|
|||
</script>
|
||||
|
||||
<code>{value}</code>
|
||||
|
||||
<style>
|
||||
code {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: var(--max-cell-width);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -43,11 +43,3 @@
|
|||
<div on:click|stopPropagation={onClick}>
|
||||
<Icon size="S" name="Copy" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,21 @@
|
|||
export let allowEditRows = false
|
||||
</script>
|
||||
|
||||
{#if allowSelectRows}
|
||||
<Checkbox value={selected} />
|
||||
{/if}
|
||||
{#if allowEditRows}
|
||||
<ActionButton size="S" on:click={onEdit}>Edit</ActionButton>
|
||||
{/if}
|
||||
<div>
|
||||
{#if allowSelectRows}
|
||||
<Checkbox value={selected} />
|
||||
{/if}
|
||||
{#if allowEditRows}
|
||||
<ActionButton size="S" on:click={onEdit}>Edit</ActionButton>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 150px;
|
||||
white-space: nowrap;
|
||||
max-width: var(--max-cell-width);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
import CellRenderer from "./CellRenderer.svelte"
|
||||
import SelectEditRenderer from "./SelectEditRenderer.svelte"
|
||||
import { cloneDeep, deepGet } from "../helpers"
|
||||
import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte"
|
||||
import Checkbox from "../Form/Checkbox.svelte"
|
||||
|
||||
/**
|
||||
* The expected schema is our normal couch schemas for our tables.
|
||||
|
|
@ -14,6 +16,11 @@
|
|||
* sortable: Set to false to disable sorting data by a certain column
|
||||
* editable: Set to false to disable editing a certain column if the
|
||||
* allowEditColumns prop is true
|
||||
* width: the width of the column
|
||||
* align: the alignment of the column
|
||||
* template: a HBS or JS binding to use as the value
|
||||
* background: the background color
|
||||
* color: the text color
|
||||
*/
|
||||
export let data = []
|
||||
export let schema = {}
|
||||
|
|
@ -25,16 +32,16 @@
|
|||
export let allowEditRows = true
|
||||
export let allowEditColumns = true
|
||||
export let selectedRows = []
|
||||
export let editColumnTitle = "Edit"
|
||||
export let customRenderers = []
|
||||
export let disableSorting = false
|
||||
export let autoSortColumns = true
|
||||
export let compact = false
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
// Config
|
||||
const rowHeight = 55
|
||||
const headerHeight = 36
|
||||
const rowPreload = 5
|
||||
$: rowHeight = compact ? 46 : 55
|
||||
|
||||
// Sorting state
|
||||
let sortColumn
|
||||
|
|
@ -43,33 +50,39 @@
|
|||
// Table state
|
||||
let height = 0
|
||||
let loaded = false
|
||||
let checkboxStatus = false
|
||||
|
||||
$: schema = fixSchema(schema)
|
||||
$: if (!loading) loaded = true
|
||||
$: rows = data ?? []
|
||||
$: visibleRowCount = getVisibleRowCount(loaded, height, rows.length, rowCount)
|
||||
$: contentStyle = getContentStyle(visibleRowCount, rowCount)
|
||||
$: sortedRows = sortRows(rows, sortColumn, sortOrder)
|
||||
$: fields = getFields(schema, showAutoColumns)
|
||||
$: showEditColumn = allowEditRows || allowSelectRows
|
||||
|
||||
// Scrolling state
|
||||
let timeout
|
||||
let nextScrollTop = 0
|
||||
let scrollTop = 0
|
||||
$: firstVisibleRow = calculateFirstVisibleRow(scrollTop)
|
||||
$: lastVisibleRow = calculateLastVisibleRow(
|
||||
firstVisibleRow,
|
||||
visibleRowCount,
|
||||
rows.length
|
||||
$: fields = getFields(schema, showAutoColumns, autoSortColumns)
|
||||
$: rows = fields?.length ? data || [] : []
|
||||
$: totalRowCount = rows?.length || 0
|
||||
$: visibleRowCount = getVisibleRowCount(
|
||||
loaded,
|
||||
height,
|
||||
rows.length,
|
||||
rowCount,
|
||||
rowHeight
|
||||
)
|
||||
$: heightStyle = getHeightStyle(
|
||||
visibleRowCount,
|
||||
rowCount,
|
||||
totalRowCount,
|
||||
rowHeight
|
||||
)
|
||||
$: sortedRows = sortRows(rows, sortColumn, sortOrder)
|
||||
$: gridStyle = getGridStyle(fields, schema, showEditColumn)
|
||||
$: showEditColumn = allowEditRows || allowSelectRows
|
||||
$: cellStyles = computeCellStyles(schema)
|
||||
|
||||
// Reset state when data changes
|
||||
$: rows.length, reset()
|
||||
const reset = () => {
|
||||
nextScrollTop = 0
|
||||
scrollTop = 0
|
||||
clearTimeout(timeout)
|
||||
timeout = null
|
||||
// Deselect the "select all" checkbox when the user navigates to a new page
|
||||
$: {
|
||||
let checkRowCount = rows.filter(o1 =>
|
||||
selectedRows.some(o2 => o1._id === o2._id)
|
||||
)
|
||||
if (checkRowCount.length === 0) {
|
||||
checkboxStatus = false
|
||||
}
|
||||
}
|
||||
|
||||
const fixSchema = schema => {
|
||||
|
|
@ -90,7 +103,7 @@
|
|||
return fixedSchema
|
||||
}
|
||||
|
||||
const getVisibleRowCount = (loaded, height, allRows, rowCount) => {
|
||||
const getVisibleRowCount = (loaded, height, allRows, rowCount, rowHeight) => {
|
||||
if (!loaded) {
|
||||
return rowCount || 0
|
||||
}
|
||||
|
|
@ -100,11 +113,33 @@
|
|||
return Math.min(allRows, Math.ceil(height / rowHeight))
|
||||
}
|
||||
|
||||
const getContentStyle = (visibleRows, rowCount) => {
|
||||
if (!rowCount || !visibleRows) {
|
||||
const getHeightStyle = (
|
||||
visibleRowCount,
|
||||
rowCount,
|
||||
totalRowCount,
|
||||
rowHeight
|
||||
) => {
|
||||
if (!rowCount || !visibleRowCount || totalRowCount <= rowCount) {
|
||||
return ""
|
||||
}
|
||||
return `height: ${headerHeight + visibleRows * (rowHeight + 1)}px;`
|
||||
return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
|
||||
}
|
||||
|
||||
const getGridStyle = (fields, schema, showEditColumn) => {
|
||||
let style = "grid-template-columns:"
|
||||
if (showEditColumn) {
|
||||
style += " auto"
|
||||
}
|
||||
fields?.forEach(field => {
|
||||
const fieldSchema = schema[field]
|
||||
if (fieldSchema.width) {
|
||||
style += ` ${fieldSchema.width}`
|
||||
} else {
|
||||
style += " minmax(auto, 1fr)"
|
||||
}
|
||||
})
|
||||
style += ";"
|
||||
return style
|
||||
}
|
||||
|
||||
const sortRows = (rows, sortColumn, sortOrder) => {
|
||||
|
|
@ -143,14 +178,14 @@
|
|||
return name || ""
|
||||
}
|
||||
|
||||
const getFields = (schema, showAutoColumns) => {
|
||||
const getFields = (schema, showAutoColumns, autoSortColumns) => {
|
||||
let columns = []
|
||||
let autoColumns = []
|
||||
Object.entries(schema || {}).forEach(([field, fieldSchema]) => {
|
||||
if (!field || !fieldSchema) {
|
||||
return
|
||||
}
|
||||
if (!fieldSchema?.autocolumn) {
|
||||
if (!autoSortColumns || !fieldSchema?.autocolumn) {
|
||||
columns.push(fieldSchema)
|
||||
} else if (showAutoColumns) {
|
||||
autoColumns.push(fieldSchema)
|
||||
|
|
@ -171,28 +206,6 @@
|
|||
.map(column => column.name)
|
||||
}
|
||||
|
||||
const onScroll = event => {
|
||||
nextScrollTop = event.target.scrollTop
|
||||
if (timeout) {
|
||||
return
|
||||
}
|
||||
timeout = setTimeout(() => {
|
||||
scrollTop = nextScrollTop
|
||||
timeout = null
|
||||
}, 50)
|
||||
}
|
||||
|
||||
const calculateFirstVisibleRow = scrollTop => {
|
||||
return Math.max(Math.floor(scrollTop / (rowHeight + 1)) - rowPreload, 0)
|
||||
}
|
||||
|
||||
const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => {
|
||||
if (visibleRowCount === 0) {
|
||||
return -1
|
||||
}
|
||||
return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount)
|
||||
}
|
||||
|
||||
const editColumn = (e, field) => {
|
||||
e.stopPropagation()
|
||||
dispatch("editcolumn", field)
|
||||
|
|
@ -207,176 +220,270 @@
|
|||
if (!allowSelectRows) {
|
||||
return
|
||||
}
|
||||
if (selectedRows.includes(row)) {
|
||||
selectedRows = selectedRows.filter(selectedRow => selectedRow !== row)
|
||||
if (selectedRows.some(selectedRow => selectedRow._id === row._id)) {
|
||||
selectedRows = selectedRows.filter(
|
||||
selectedRow => selectedRow._id !== row._id
|
||||
)
|
||||
} else {
|
||||
selectedRows = [...selectedRows, row]
|
||||
}
|
||||
}
|
||||
|
||||
const toggleSelectAll = e => {
|
||||
const select = !!e.detail
|
||||
if (select) {
|
||||
// Add any rows which are not already in selected rows
|
||||
rows.forEach(row => {
|
||||
if (selectedRows.findIndex(x => x._id === row._id) === -1) {
|
||||
selectedRows.push(row)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// Remove any rows from selected rows that are in the current data set
|
||||
selectedRows = selectedRows.filter(el =>
|
||||
rows.every(f => f._id !== el._id)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const computeCellStyles = schema => {
|
||||
let styles = {}
|
||||
Object.keys(schema || {}).forEach(field => {
|
||||
styles[field] = ""
|
||||
if (schema[field].color) {
|
||||
styles[field] += `color: ${schema[field].color};`
|
||||
}
|
||||
if (schema[field].background) {
|
||||
styles[field] += `background-color: ${schema[field].background};`
|
||||
}
|
||||
if (schema[field].align === "Center") {
|
||||
styles[field] += "justify-content: center; text-align: center;"
|
||||
}
|
||||
if (schema[field].align === "Right") {
|
||||
styles[field] += "justify-content: flex-end; text-align: right;"
|
||||
}
|
||||
})
|
||||
return styles
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="wrapper" bind:offsetHeight={height}>
|
||||
<div
|
||||
class="wrapper"
|
||||
class:wrapper--quiet={quiet}
|
||||
class:wrapper--compact={compact}
|
||||
bind:offsetHeight={height}
|
||||
style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
|
||||
>
|
||||
{#if !loaded}
|
||||
<div class="loading" style={contentStyle} />
|
||||
<div class="loading" style={heightStyle}>
|
||||
<ProgressCircle />
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
on:scroll={onScroll}
|
||||
class:quiet
|
||||
style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
|
||||
class="container"
|
||||
>
|
||||
<div style={contentStyle}>
|
||||
<table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
|
||||
{#if fields.length}
|
||||
<thead class="spectrum-Table-head">
|
||||
<tr>
|
||||
{#if showEditColumn}
|
||||
<th class="spectrum-Table-headCell">
|
||||
<div class="spectrum-Table-headCell-content">
|
||||
{editColumnTitle || ""}
|
||||
</div>
|
||||
</th>
|
||||
{/if}
|
||||
{#each fields as field}
|
||||
<th
|
||||
class="spectrum-Table-headCell"
|
||||
class:is-sortable={schema[field].sortable !== false}
|
||||
class:is-sorted-desc={sortColumn === field &&
|
||||
sortOrder === "Descending"}
|
||||
class:is-sorted-asc={sortColumn === field &&
|
||||
sortOrder === "Ascending"}
|
||||
on:click={() => sortBy(schema[field])}
|
||||
>
|
||||
<div class="spectrum-Table-headCell-content">
|
||||
<div class="title">{getDisplayName(schema[field])}</div>
|
||||
{#if schema[field]?.autocolumn}
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-Table-autoIcon"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-MagicWand" />
|
||||
</svg>
|
||||
{/if}
|
||||
{#if sortColumn === field}
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#spectrum-css-icon-Arrow100" />
|
||||
</svg>
|
||||
{/if}
|
||||
{#if allowEditColumns && schema[field]?.editable !== false}
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-Table-editIcon"
|
||||
focusable="false"
|
||||
on:click={e => editColumn(e, field)}
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-Edit" />
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
|
||||
{#if fields.length}
|
||||
<div class="spectrum-Table-head">
|
||||
{#if showEditColumn}
|
||||
<div
|
||||
class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
|
||||
>
|
||||
{#if allowSelectRows}
|
||||
<Checkbox
|
||||
bind:value={checkboxStatus}
|
||||
on:change={toggleSelectAll}
|
||||
/>
|
||||
{:else}
|
||||
Edit
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<tbody class="spectrum-Table-body">
|
||||
{#if sortedRows?.length && fields.length}
|
||||
{#each sortedRows as row, idx}
|
||||
<tr
|
||||
on:click={() => dispatch("click", row)}
|
||||
on:click={() => toggleSelectRow(row)}
|
||||
class="spectrum-Table-row"
|
||||
class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}
|
||||
{#each fields as field}
|
||||
<div
|
||||
class="spectrum-Table-headCell"
|
||||
class:spectrum-Table-headCell--alignCenter={schema[field]
|
||||
.align === "Center"}
|
||||
class:spectrum-Table-headCell--alignRight={schema[field].align ===
|
||||
"Right"}
|
||||
class:is-sortable={schema[field].sortable !== false}
|
||||
class:is-sorted-desc={sortColumn === field &&
|
||||
sortOrder === "Descending"}
|
||||
class:is-sorted-asc={sortColumn === field &&
|
||||
sortOrder === "Ascending"}
|
||||
on:click={() => sortBy(schema[field])}
|
||||
>
|
||||
<div class="title">{getDisplayName(schema[field])}</div>
|
||||
{#if schema[field]?.autocolumn}
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-Table-autoIcon"
|
||||
focusable="false"
|
||||
>
|
||||
{#if idx >= firstVisibleRow && idx <= lastVisibleRow}
|
||||
{#if showEditColumn}
|
||||
<td
|
||||
class="spectrum-Table-cell spectrum-Table-cell--divider"
|
||||
>
|
||||
<div class="spectrum-Table-cell-content">
|
||||
<SelectEditRenderer
|
||||
data={row}
|
||||
selected={selectedRows.includes(row)}
|
||||
onToggleSelection={() => toggleSelectRow(row)}
|
||||
onEdit={e => editRow(e, row)}
|
||||
{allowSelectRows}
|
||||
{allowEditRows}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
{/if}
|
||||
{#each fields as field}
|
||||
<td
|
||||
class="spectrum-Table-cell"
|
||||
class:spectrum-Table-cell--divider={!!schema[field]
|
||||
.divider}
|
||||
>
|
||||
<div class="spectrum-Table-cell-content">
|
||||
<CellRenderer
|
||||
{customRenderers}
|
||||
{row}
|
||||
schema={schema[field]}
|
||||
value={deepGet(row, field)}
|
||||
on:clickrelationship
|
||||
>
|
||||
<slot />
|
||||
</CellRenderer>
|
||||
</div>
|
||||
</td>
|
||||
{/each}
|
||||
{/if}
|
||||
</tr>
|
||||
{/each}
|
||||
{:else}
|
||||
<tr class="placeholder-row">
|
||||
{#if showEditColumn}
|
||||
<td class="placeholder-offset" />
|
||||
{/if}
|
||||
{#each fields as field}
|
||||
<td />
|
||||
{/each}
|
||||
<div class="placeholder" class:has-fields={fields.length > 0}>
|
||||
<div class="placeholder-content">
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-Icon--sizeXXL"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-Table" />
|
||||
</svg>
|
||||
<div>No rows found</div>
|
||||
</div>
|
||||
</div>
|
||||
</tr>
|
||||
<use xlink:href="#spectrum-icon-18-MagicWand" />
|
||||
</svg>
|
||||
{/if}
|
||||
{#if sortColumn === field}
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#spectrum-css-icon-Arrow100" />
|
||||
</svg>
|
||||
{/if}
|
||||
{#if allowEditColumns && schema[field]?.editable !== false}
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-Table-editIcon"
|
||||
focusable="false"
|
||||
on:click={e => editColumn(e, field)}
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-Edit" />
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{#if sortedRows?.length}
|
||||
{#each sortedRows as row, idx}
|
||||
<div
|
||||
class="spectrum-Table-row"
|
||||
on:click={() => dispatch("click", row)}
|
||||
on:click={() => toggleSelectRow(row)}
|
||||
>
|
||||
{#if showEditColumn}
|
||||
<div
|
||||
class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
|
||||
on:click={e => {
|
||||
toggleSelectRow(row)
|
||||
e.stopPropagation()
|
||||
}}
|
||||
>
|
||||
<SelectEditRenderer
|
||||
data={row}
|
||||
selected={selectedRows.findIndex(
|
||||
selectedRow => selectedRow._id === row._id
|
||||
) !== -1}
|
||||
onEdit={e => editRow(e, row)}
|
||||
{allowSelectRows}
|
||||
{allowEditRows}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{#each fields as field}
|
||||
<div
|
||||
class="spectrum-Table-cell"
|
||||
class:spectrum-Table-cell--divider={!!schema[field].divider}
|
||||
style={cellStyles[field]}
|
||||
>
|
||||
<CellRenderer
|
||||
{customRenderers}
|
||||
{row}
|
||||
schema={schema[field]}
|
||||
value={deepGet(row, field)}
|
||||
on:clickrelationship
|
||||
>
|
||||
<slot />
|
||||
</CellRenderer>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="placeholder" class:placeholder--no-fields={!fields?.length}>
|
||||
<div class="placeholder-content">
|
||||
<svg class="spectrum-Icon spectrum-Icon--sizeXXL" focusable="false">
|
||||
<use xlink:href="#spectrum-icon-18-Table" />
|
||||
</svg>
|
||||
<div>No rows found</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Wrapper */
|
||||
.wrapper {
|
||||
background-color: var(--spectrum-alias-background-color-secondary);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
--table-bg: var(--spectrum-global-color-gray-50);
|
||||
--table-border: 1px solid var(--spectrum-alias-border-color-mid);
|
||||
--cell-padding: var(--spectrum-global-dimension-size-250);
|
||||
}
|
||||
.wrapper--quiet {
|
||||
--table-bg: var(--spectrum-alias-background-color-transparent);
|
||||
}
|
||||
.wrapper--compact {
|
||||
--cell-padding: var(--spectrum-global-dimension-size-150);
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
/* Loading */
|
||||
.loading {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.spectrum-Table {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
display: grid;
|
||||
overflow: auto;
|
||||
}
|
||||
.container.quiet {
|
||||
border: none;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.spectrum-Table-head {
|
||||
display: contents;
|
||||
}
|
||||
.spectrum-Table-head > :first-child {
|
||||
border-left: 1px solid transparent;
|
||||
padding-left: var(--cell-padding);
|
||||
}
|
||||
.spectrum-Table-head > :last-child {
|
||||
border-right: 1px solid transparent;
|
||||
padding-right: var(--cell-padding);
|
||||
}
|
||||
.spectrum-Table-headCell {
|
||||
height: var(--header-height);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background-color: var(--spectrum-alias-background-color-secondary);
|
||||
z-index: 2;
|
||||
border-bottom: var(--table-border);
|
||||
padding: 0 calc(var(--cell-padding) / 1.33);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
}
|
||||
.spectrum-Table-headCell--alignCenter {
|
||||
justify-content: center;
|
||||
}
|
||||
.spectrum-Table-headCell--alignRight {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.spectrum-Table-headCell--divider {
|
||||
padding-right: var(--cell-padding);
|
||||
}
|
||||
.spectrum-Table-headCell--divider + .spectrum-Table-headCell {
|
||||
padding-left: var(--cell-padding);
|
||||
}
|
||||
.spectrum-Table-headCell--edit {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
.spectrum-Table-headCell .title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.spectrum-Table-headCell:hover .spectrum-Table-editIcon {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.spectrum-Table-headCell .spectrum-Icon {
|
||||
pointer-events: all;
|
||||
margin-left: var(
|
||||
|
|
@ -392,63 +499,93 @@
|
|||
.spectrum-Table-editIcon {
|
||||
opacity: 0;
|
||||
}
|
||||
.spectrum-Table-headCell:hover .spectrum-Table-editIcon {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
/* Table rows */
|
||||
.spectrum-Table-row {
|
||||
display: contents;
|
||||
}
|
||||
.spectrum-Table-row:hover .spectrum-Table-cell {
|
||||
/*background-color: var(--hover-bg) !important;*/
|
||||
}
|
||||
.spectrum-Table-row:hover .spectrum-Table-cell:after {
|
||||
background-color: var(--spectrum-alias-highlight-hover);
|
||||
}
|
||||
.wrapper--quiet .spectrum-Table-row {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
.spectrum-Table-row > :first-child {
|
||||
border-left: var(--table-border);
|
||||
padding-left: var(--cell-padding);
|
||||
}
|
||||
.spectrum-Table-row > :last-child {
|
||||
border-right: var(--table-border);
|
||||
padding-right: var(--cell-padding);
|
||||
}
|
||||
|
||||
th {
|
||||
vertical-align: middle;
|
||||
height: var(--header-height);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background-color: var(--spectrum-alias-background-color-secondary);
|
||||
border-bottom: 1px solid
|
||||
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
|
||||
}
|
||||
.spectrum-Table-headCell-content {
|
||||
/* Table cells */
|
||||
.spectrum-Table-cell {
|
||||
flex: 1 1 auto;
|
||||
padding: 0 calc(var(--cell-padding) / 1.33);
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-radius: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
height: var(--row-height);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
gap: 4px;
|
||||
border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
|
||||
background-color: var(--table-bg);
|
||||
z-index: 1;
|
||||
}
|
||||
.spectrum-Table-headCell-content .title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.spectrum-Table-cell--divider {
|
||||
padding-right: var(--cell-padding);
|
||||
}
|
||||
.spectrum-Table-cell--divider + .spectrum-Table-cell {
|
||||
padding-left: var(--cell-padding);
|
||||
}
|
||||
.spectrum-Table-cell--edit {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.spectrum-Table-cell:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
transition: background-color
|
||||
var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
|
||||
}
|
||||
|
||||
.placeholder-row {
|
||||
position: relative;
|
||||
height: 150px;
|
||||
}
|
||||
.placeholder-row td {
|
||||
border-top: none !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.placeholder-offset {
|
||||
width: 1px;
|
||||
}
|
||||
/* Placeholder */
|
||||
.placeholder {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: var(--table-border);
|
||||
border-top: none;
|
||||
grid-column: 1 / -1;
|
||||
background-color: var(--table-bg);
|
||||
}
|
||||
.placeholder.has-fields {
|
||||
top: var(--header-height);
|
||||
height: calc(100% - var(--header-height));
|
||||
.placeholder--no-fields {
|
||||
border-top: var(--table-border);
|
||||
}
|
||||
.wrapper--quiet .placeholder {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.placeholder-content {
|
||||
padding: 20px;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -466,41 +603,4 @@
|
|||
);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
tbody {
|
||||
z-index: 1;
|
||||
}
|
||||
tbody tr {
|
||||
height: var(--row-height);
|
||||
}
|
||||
tbody tr.hidden {
|
||||
height: calc(var(--row-height) + 1px);
|
||||
}
|
||||
td {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
border-top: 1px solid
|
||||
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
|
||||
border-radius: 0;
|
||||
}
|
||||
tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
tr:last-child td {
|
||||
border-bottom: 1px solid
|
||||
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
|
||||
}
|
||||
td.spectrum-Table-cell--divider {
|
||||
width: 1px;
|
||||
}
|
||||
.spectrum-Table-cell-content {
|
||||
height: var(--row-height);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
})
|
||||
|
||||
function id() {
|
||||
return "_" + Math.random().toString(36).substr(2, 9)
|
||||
return "_" + Math.random().toString(36).slice(2, 9)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
|
|||
export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
|
||||
export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
|
||||
export { default as Banner } from "./Banner/Banner.svelte"
|
||||
export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
|
||||
export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
|
||||
export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
|
||||
export { default as RichTextField } from "./Form/RichTextField.svelte"
|
||||
|
|
@ -84,6 +85,7 @@ export { default as clickOutside } from "./Actions/click_outside"
|
|||
|
||||
// Stores
|
||||
export { notifications, createNotificationStore } from "./Stores/notifications"
|
||||
export { banner } from "./Stores/banner"
|
||||
|
||||
// Helpers
|
||||
export * as Helpers from "./helpers"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
{
|
||||
"baseUrl": "http://localhost:10001/builder/",
|
||||
"video": true,
|
||||
"baseUrl": "http://localhost:4100",
|
||||
"video": false,
|
||||
"projectId": "bmbemn",
|
||||
"env": {
|
||||
"PORT": "10001",
|
||||
"JWT_SECRET": "test"
|
||||
"PORT": "4100",
|
||||
"WORKER_PORT": "4200",
|
||||
"JWT_SECRET": "test",
|
||||
"HOST_IP": ""
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
context("Add Multi-Option Datatype", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
})
|
||||
import filterTests from "../support/filterTests"
|
||||
|
||||
it("should create a new table, with data", () => {
|
||||
cy.createTable("Multi Data")
|
||||
cy.addColumn("Multi Data", "Test Data", "Multi-select", "1\n2\n3\n4\n5")
|
||||
cy.addRowMultiValue(["1", "2", "3", "4", "5"])
|
||||
})
|
||||
filterTests(['all'], () => {
|
||||
context("Add Multi-Option Datatype", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
})
|
||||
|
||||
it("should create a new table, with data", () => {
|
||||
cy.createTable("Multi Data")
|
||||
cy.addColumn("Multi Data", "Test Data", "Multi-select", "1\n2\n3\n4\n5")
|
||||
cy.addRowMultiValue(["1", "2", "3", "4", "5"])
|
||||
})
|
||||
|
||||
it("should add form with multi select picker, containing 5 options", () => {
|
||||
cy.navigateToFrontend()
|
||||
|
|
@ -39,6 +42,7 @@ context("Add Multi-Option Datatype", () => {
|
|||
cy.getComponent(componentId)
|
||||
.find(".spectrum-Picker-label")
|
||||
.contains("(5)")
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,35 +1,39 @@
|
|||
context("Add Radio Buttons", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
})
|
||||
import filterTests from "../support/filterTests"
|
||||
|
||||
it("should add Radio Buttons options picker on form, add data, and confirm", () => {
|
||||
cy.navigateToFrontend()
|
||||
cy.addComponent("Form", "Form")
|
||||
cy.addComponent("Form", "Options Picker").then((componentId) => {
|
||||
// Provide field setting
|
||||
cy.get(`[data-cy="field-prop-control"]`).type("1")
|
||||
// Open dropdown and select Radio buttons
|
||||
cy.get(`[data-cy="optionsType-prop-control"]`).click().then(() => {
|
||||
cy.get('.spectrum-Popover').contains('Radio buttons')
|
||||
.wait(500)
|
||||
.click()
|
||||
filterTests(['all'], () => {
|
||||
context("Add Radio Buttons", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
})
|
||||
const radioButtonsTotal = 3
|
||||
// Add values and confirm total
|
||||
addRadioButtonData(radioButtonsTotal)
|
||||
cy.getComponent(componentId).find('[type="radio"]')
|
||||
.should('have.length', radioButtonsTotal)
|
||||
})
|
||||
})
|
||||
|
||||
const addRadioButtonData = (totalRadioButtons) => {
|
||||
cy.get(`[data-cy="optionsSource-prop-control"]`).click().then(() => {
|
||||
cy.get('.spectrum-Popover').contains('Custom')
|
||||
|
||||
it("should add Radio Buttons options picker on form, add data, and confirm", () => {
|
||||
cy.navigateToFrontend()
|
||||
cy.addComponent("Form", "Form")
|
||||
cy.addComponent("Form", "Options Picker").then((componentId) => {
|
||||
// Provide field setting
|
||||
cy.get(`[data-cy="field-prop-control"]`).type("1")
|
||||
// Open dropdown and select Radio buttons
|
||||
cy.get(`[data-cy="optionsType-prop-control"]`).click().then(() => {
|
||||
cy.get('.spectrum-Popover').contains('Radio buttons')
|
||||
.wait(500)
|
||||
.click()
|
||||
})
|
||||
const radioButtonsTotal = 3
|
||||
// Add values and confirm total
|
||||
addRadioButtonData(radioButtonsTotal)
|
||||
cy.getComponent(componentId).find('[type="radio"]')
|
||||
.should('have.length', radioButtonsTotal)
|
||||
})
|
||||
})
|
||||
cy.addCustomSourceOptions(totalRadioButtons)
|
||||
}
|
||||
|
||||
const addRadioButtonData = (totalRadioButtons) => {
|
||||
cy.get(`[data-cy="optionsSource-prop-control"]`).click().then(() => {
|
||||
cy.get('.spectrum-Popover').contains('Custom')
|
||||
.wait(500)
|
||||
.click()
|
||||
})
|
||||
cy.addCustomSourceOptions(totalRadioButtons)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
|
|||
51
packages/builder/cypress/integration/autoScreensUI.spec.js
Normal file
51
packages/builder/cypress/integration/autoScreensUI.spec.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import filterTests from "../support/filterTests"
|
||||
|
||||
filterTests(['smoke', 'all'], () => {
|
||||
context("Auto Screens UI", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
})
|
||||
|
||||
it("should generate internal table screens", () => {
|
||||
// Create autogenerated screens from the internal table
|
||||
cy.createAutogeneratedScreens(["Cypress Tests"])
|
||||
// Confirm screens have been auto generated
|
||||
cy.get(".nav-items-container").contains("cypress-tests").click({ force: true })
|
||||
cy.get(".nav-items-container").should('contain', 'cypress-tests/:id')
|
||||
.and('contain', 'cypress-tests/new/row')
|
||||
})
|
||||
|
||||
it("should generate multiple internal table screens at once", () => {
|
||||
// Create a second internal table
|
||||
const initialTable = "Cypress Tests"
|
||||
const secondTable = "Table Two"
|
||||
cy.createTable(secondTable)
|
||||
// Create autogenerated screens from the internal tables
|
||||
cy.createAutogeneratedScreens([initialTable, secondTable])
|
||||
// Confirm screens have been auto generated
|
||||
cy.get(".nav-items-container").contains("cypress-tests").click({ force: true })
|
||||
// Previously generated tables are suffixed with numbers - as expected
|
||||
cy.get(".nav-items-container").should('contain', 'cypress-tests-2/:id')
|
||||
.and('contain', 'cypress-tests-2/new/row')
|
||||
cy.get(".nav-items-container").contains("table-two").click()
|
||||
cy.get(".nav-items-container").should('contain', 'table-two/:id')
|
||||
.and('contain', 'table-two/new/row')
|
||||
})
|
||||
|
||||
if (Cypress.env("TEST_ENV")) {
|
||||
it("should generate data source screens", () => {
|
||||
// Using MySQL data source for testing this
|
||||
const datasource = "MySQL"
|
||||
// Select & configure MySQL data source
|
||||
cy.selectExternalDatasource(datasource)
|
||||
cy.addDatasourceConfig(datasource)
|
||||
// Create autogenerated screens from a MySQL table - MySQL contains books table
|
||||
cy.createAutogeneratedScreens(["books"])
|
||||
cy.get(".nav-items-container").contains("books").click()
|
||||
cy.get(".nav-items-container").should('contain', 'books/:id')
|
||||
.and('contain', 'books/new/row')
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import filterTests from "../support/filterTests"
|
||||
|
||||
filterTests(['all'], () => {
|
||||
context("Change Application Icon and Colour", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
})
|
||||
|
||||
it("should change the icon and colour for an application", () => {
|
||||
// Search for test application
|
||||
cy.searchForApplication("Cypress Tests")
|
||||
cy.get(".appTable")
|
||||
.within(() => {
|
||||
cy.get(".spectrum-Icon").eq(1).click()
|
||||
})
|
||||
cy.get(".spectrum-Menu").contains("Edit icon").click()
|
||||
// Select random icon
|
||||
cy.get(".grid").within(() => {
|
||||
cy.get(".icon-item").eq(Math.floor(Math.random() * 23) + 1).click()
|
||||
})
|
||||
// Select random colour
|
||||
cy.get(".fill").click()
|
||||
cy.get(".colors").within(() => {
|
||||
cy.get(".color").eq(Math.floor(Math.random() * 33) + 1).click()
|
||||
})
|
||||
cy.intercept('**/applications/**').as('iconChange')
|
||||
cy.get(".spectrum-Button").contains("Save").click({ force: true })
|
||||
cy.wait("@iconChange")
|
||||
cy.get("@iconChange").its('response.statusCode')
|
||||
.should('eq', 200)
|
||||
cy.wait(1000)
|
||||
// Confirm icon has changed from default
|
||||
// Confirm colour has been applied - There is no default colour
|
||||
cy.get(".appTable")
|
||||
.within(() => {
|
||||
cy.get('[aria-label]').eq(0).children()
|
||||
.should('have.attr', 'xlink:href').and('not.contain', '#spectrum-icon-18-Apps')
|
||||
cy.get(".title").children().children()
|
||||
.should('have.attr', 'style').and('contains', 'color')
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -1,8 +1,12 @@
|
|||
context("Create an Application", () => {
|
||||
it("should create a new application", () => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
|
||||
cy.contains("Cypress Tests").should("exist")
|
||||
})
|
||||
import filterTests from '../support/filterTests'
|
||||
|
||||
filterTests(['smoke', 'all'], () => {
|
||||
context("Create an Application", () => {
|
||||
it("should create a new application", () => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`)
|
||||
cy.contains("Cypress Tests").should("exist")
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,66 +1,69 @@
|
|||
context("Create a automation", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
})
|
||||
import filterTests from "../support/filterTests"
|
||||
|
||||
// https://on.cypress.io/interacting-with-elements
|
||||
it("should create a automation", () => {
|
||||
cy.createTestTableWithData()
|
||||
cy.wait(2000)
|
||||
cy.contains("Automate").click()
|
||||
cy.get("[data-cy='new-screen'] > .spectrum-Icon").click()
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.get("input").type("Add Row")
|
||||
cy.contains("Row Created").click({ force: true })
|
||||
cy.wait(500)
|
||||
cy.get(".spectrum-Button--cta").click()
|
||||
filterTests(['smoke', 'all'], () => {
|
||||
context("Create a automation", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
})
|
||||
|
||||
// Setup trigger
|
||||
cy.contains("Setup").click()
|
||||
cy.get(".spectrum-Picker-label").click()
|
||||
cy.wait(500)
|
||||
cy.contains("dog").click()
|
||||
cy.wait(2000)
|
||||
// Create action
|
||||
cy.get(".block > .spectrum-Icon").click()
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.wait(1000)
|
||||
cy.contains("Create Row").trigger('mouseover').click().click()
|
||||
cy.get(".spectrum-Button--cta").click()
|
||||
})
|
||||
cy.contains("Setup").click()
|
||||
cy.get(".spectrum-Picker-label").click()
|
||||
cy.contains("dog").click()
|
||||
cy.get(".spectrum-Textfield-input")
|
||||
.first()
|
||||
.type("{{ trigger.row.name }}", { parseSpecialCharSequences: false })
|
||||
cy.get(".spectrum-Textfield-input")
|
||||
.eq(1)
|
||||
.type("11")
|
||||
cy.contains("Finish and test automation").click()
|
||||
it("should create a automation", () => {
|
||||
cy.createTestTableWithData()
|
||||
cy.wait(2000)
|
||||
cy.contains("Automate").click()
|
||||
cy.get("[data-cy='new-screen'] > .spectrum-Icon").click()
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.get("input").type("Add Row")
|
||||
cy.contains("Row Created").click({ force: true })
|
||||
cy.wait(500)
|
||||
cy.get(".spectrum-Button--cta").click()
|
||||
})
|
||||
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.wait(1000)
|
||||
// Setup trigger
|
||||
cy.contains("Setup").click()
|
||||
cy.get(".spectrum-Picker-label").click()
|
||||
cy.wait(500)
|
||||
cy.contains("dog").click()
|
||||
cy.wait(2000)
|
||||
// Create action
|
||||
cy.get('[aria-label="AddCircle"]').eq(1).click()
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.wait(1000)
|
||||
cy.contains("Create Row").trigger('mouseover').click().click()
|
||||
cy.get(".spectrum-Button--cta").click()
|
||||
})
|
||||
cy.contains("Setup").click()
|
||||
cy.get(".spectrum-Picker-label").eq(1).click()
|
||||
cy.contains("dog").click()
|
||||
cy.wait(1000)
|
||||
cy.get(".spectrum-Textfield-input")
|
||||
.first()
|
||||
.type("automationGoodboy")
|
||||
.first()
|
||||
.type("{{ trigger.row.name }}", { parseSpecialCharSequences: false })
|
||||
cy.get(".spectrum-Textfield-input")
|
||||
.eq(1)
|
||||
.type("11")
|
||||
cy.get(".spectrum-Textfield-input")
|
||||
.eq(2)
|
||||
.type("123456")
|
||||
cy.get(".spectrum-Textfield-input")
|
||||
.eq(3)
|
||||
.type("123456")
|
||||
cy.contains("Test").click()
|
||||
cy.contains("Finish and test automation").click()
|
||||
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.wait(1000)
|
||||
cy.get(".spectrum-Picker-label").click()
|
||||
cy.contains("dog").click()
|
||||
cy.wait(1000)
|
||||
cy.get(".spectrum-Textfield-input")
|
||||
.first()
|
||||
.type("automationGoodboy")
|
||||
cy.get(".spectrum-Textfield-input")
|
||||
.eq(1)
|
||||
.type("11")
|
||||
cy.get(".spectrum-Textfield-input")
|
||||
.eq(2)
|
||||
.type("123456")
|
||||
cy.get(".spectrum-Textfield-input")
|
||||
.eq(3)
|
||||
.type("123456")
|
||||
cy.contains("Test").click()
|
||||
})
|
||||
cy.contains("Data").click()
|
||||
cy.contains("automationGoodboy")
|
||||
})
|
||||
cy.contains("Data").click()
|
||||
cy.contains("automationGoodboy")
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,58 +1,62 @@
|
|||
context("Create Bindings", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
cy.navigateToFrontend()
|
||||
})
|
||||
import filterTests from "../support/filterTests"
|
||||
|
||||
it("should add a current user binding", () => {
|
||||
cy.addComponent("Elements", "Paragraph").then(() => {
|
||||
addSettingBinding("text", "Current User._id")
|
||||
filterTests(['smoke', 'all'], () => {
|
||||
context("Create Bindings", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
cy.navigateToFrontend()
|
||||
})
|
||||
|
||||
it("should add a current user binding", () => {
|
||||
cy.addComponent("Elements", "Paragraph").then(() => {
|
||||
addSettingBinding("text", "Current User._id")
|
||||
})
|
||||
})
|
||||
|
||||
it("should handle an invalid binding", () => {
|
||||
cy.addComponent("Elements", "Paragraph").then(componentId => {
|
||||
// Cypress needs to escape curly brackets
|
||||
cy.get("[data-cy=setting-text] input")
|
||||
.type("{{}{{}{{} Current User._id {}}{}}")
|
||||
.blur()
|
||||
cy.getComponent(componentId).should("have.text", "{{{ [user].[_id] }}")
|
||||
})
|
||||
})
|
||||
|
||||
it("should add a URL param binding", () => {
|
||||
const paramName = "foo"
|
||||
cy.createScreen("Test Param", `/test/:${paramName}`)
|
||||
cy.addComponent("Elements", "Paragraph").then(componentId => {
|
||||
addSettingBinding("text", `URL.${paramName}`)
|
||||
// The builder preview pages don't have a real URL, so all we can do
|
||||
// is check that we were able to bind to the property, and that the
|
||||
// component exists on the page
|
||||
cy.getComponent(componentId).should("have.text", "New Paragraph")
|
||||
})
|
||||
})
|
||||
|
||||
it("should add a binding with a handlebars helper", () => {
|
||||
cy.addComponent("Elements", "Paragraph").then(componentId => {
|
||||
// Cypress needs to escape curly brackets
|
||||
cy.get("[data-cy=setting-text] input")
|
||||
.type("{{}{{} add 1 2 {}}{}}")
|
||||
.blur()
|
||||
cy.getComponent(componentId).should("have.text", "3")
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
it("should handle an invalid binding", () => {
|
||||
cy.addComponent("Elements", "Paragraph").then(componentId => {
|
||||
// Cypress needs to escape curly brackets
|
||||
cy.get("[data-cy=setting-text] input")
|
||||
.type("{{}{{}{{} Current User._id {}}{}}")
|
||||
.blur()
|
||||
cy.getComponent(componentId).should("have.text", "{{{ [user].[_id] }}")
|
||||
const addSettingBinding = (setting, bindingText, clickOption = true) => {
|
||||
cy.get(`[data-cy="setting-${setting}"] [data-cy=text-binding-button]`).click()
|
||||
cy.get(".drawer").within(() => {
|
||||
if (clickOption) {
|
||||
cy.contains(bindingText).click()
|
||||
cy.get("textarea").should("have.value", `{{ ${bindingText} }}`)
|
||||
} else {
|
||||
cy.get("textarea").type(bindingText)
|
||||
}
|
||||
cy.contains("Save").click()
|
||||
})
|
||||
})
|
||||
|
||||
it("should add a URL param binding", () => {
|
||||
const paramName = "foo"
|
||||
cy.createScreen("Test Param", `/test/:${paramName}`)
|
||||
cy.addComponent("Elements", "Paragraph").then(componentId => {
|
||||
addSettingBinding("text", `URL.${paramName}`)
|
||||
// The builder preview pages don't have a real URL, so all we can do
|
||||
// is check that we were able to bind to the property, and that the
|
||||
// component exists on the page
|
||||
cy.getComponent(componentId).should("have.text", "New Paragraph")
|
||||
})
|
||||
})
|
||||
|
||||
it("should add a binding with a handlebars helper", () => {
|
||||
cy.addComponent("Elements", "Paragraph").then(componentId => {
|
||||
// Cypress needs to escape curly brackets
|
||||
cy.get("[data-cy=setting-text] input")
|
||||
.type("{{}{{} add 1 2 {}}{}}")
|
||||
.blur()
|
||||
cy.getComponent(componentId).should("have.text", "3")
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const addSettingBinding = (setting, bindingText, clickOption = true) => {
|
||||
cy.get(`[data-cy="setting-${setting}"] [data-cy=text-binding-button]`).click()
|
||||
cy.get(".drawer").within(() => {
|
||||
if (clickOption) {
|
||||
cy.contains(bindingText).click()
|
||||
cy.get("textarea").should("have.value", `{{ ${bindingText} }}`)
|
||||
} else {
|
||||
cy.get("textarea").type(bindingText)
|
||||
}
|
||||
cy.contains("Save").click()
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,92 +1,97 @@
|
|||
// TODO for now components are skipped, might not be good to keep doing this
|
||||
xcontext("Create Components", () => {
|
||||
let headlineId
|
||||
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
cy.createTable("dog")
|
||||
cy.addColumn("dog", "name", "Text")
|
||||
cy.addColumn("dog", "age", "Number")
|
||||
cy.addColumn("dog", "type", "Options")
|
||||
cy.navigateToFrontend()
|
||||
})
|
||||
import filterTests from "../support/filterTests"
|
||||
|
||||
it("should add a container", () => {
|
||||
cy.addComponent(null, "Container").then(componentId => {
|
||||
cy.getComponent(componentId).should("exist")
|
||||
filterTests(['all'], () => {
|
||||
xcontext("Create Components", () => {
|
||||
let headlineId
|
||||
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
cy.createTable("dog")
|
||||
cy.addColumn("dog", "name", "Text")
|
||||
cy.addColumn("dog", "age", "Number")
|
||||
cy.addColumn("dog", "type", "Options")
|
||||
cy.navigateToFrontend()
|
||||
})
|
||||
})
|
||||
|
||||
it("should add a headline", () => {
|
||||
cy.addComponent("Elements", "Headline").then(componentId => {
|
||||
headlineId = componentId
|
||||
cy.getComponent(headlineId).should("exist")
|
||||
it("should add a container", () => {
|
||||
cy.addComponent(null, "Container").then(componentId => {
|
||||
cy.getComponent(componentId).should("exist")
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
it("should change the text of the headline", () => {
|
||||
const text = "Lorem ipsum dolor sit amet."
|
||||
cy.get("[data-cy=Settings]").click()
|
||||
cy.get("[data-cy=setting-text] input")
|
||||
.type(text)
|
||||
.blur()
|
||||
cy.getComponent(headlineId).should("have.text", text)
|
||||
})
|
||||
it("should add a headline", () => {
|
||||
cy.addComponent("Elements", "Headline").then(componentId => {
|
||||
headlineId = componentId
|
||||
cy.getComponent(headlineId).should("exist")
|
||||
})
|
||||
})
|
||||
|
||||
it("should change the size of the headline", () => {
|
||||
cy.get("[data-cy=Design]").click()
|
||||
cy.contains("Typography").click()
|
||||
cy.get("[data-cy=font-size-prop-control]").click()
|
||||
cy.contains("60px").click()
|
||||
cy.getComponent(headlineId).should("have.css", "font-size", "60px")
|
||||
})
|
||||
|
||||
it("should create a form and reset to match schema", () => {
|
||||
cy.addComponent("Form", "Form").then(() => {
|
||||
it("should change the text of the headline", () => {
|
||||
const text = "Lorem ipsum dolor sit amet."
|
||||
cy.get("[data-cy=Settings]").click()
|
||||
cy.get("[data-cy=setting-dataSource]")
|
||||
.contains("Choose option")
|
||||
.click()
|
||||
cy.get(".dropdown")
|
||||
.contains("dog")
|
||||
.click()
|
||||
cy.addComponent("Form", "Field Group").then(fieldGroupId => {
|
||||
cy.get("[data-cy=setting-text] input")
|
||||
.type(text)
|
||||
.blur()
|
||||
cy.getComponent(headlineId).should("have.text", text)
|
||||
})
|
||||
|
||||
it("should change the size of the headline", () => {
|
||||
cy.get("[data-cy=Design]").click()
|
||||
cy.contains("Typography").click()
|
||||
cy.get("[data-cy=font-size-prop-control]").click()
|
||||
cy.contains("60px").click()
|
||||
cy.getComponent(headlineId).should("have.css", "font-size", "60px")
|
||||
})
|
||||
|
||||
it("should create a form and reset to match schema", () => {
|
||||
cy.addComponent("Form", "Form").then(() => {
|
||||
cy.get("[data-cy=Settings]").click()
|
||||
cy.contains("Update Form Fields").click()
|
||||
cy.get(".modal")
|
||||
.get("button.primary")
|
||||
cy.get("[data-cy=setting-dataSource]")
|
||||
.contains("Choose option")
|
||||
.click()
|
||||
cy.getComponent(fieldGroupId).within(() => {
|
||||
cy.contains("name").should("exist")
|
||||
cy.contains("age").should("exist")
|
||||
cy.contains("type").should("exist")
|
||||
cy.get(".dropdown")
|
||||
.contains("dog")
|
||||
.click()
|
||||
cy.addComponent("Form", "Field Group").then(fieldGroupId => {
|
||||
cy.get("[data-cy=Settings]").click()
|
||||
cy.contains("Update Form Fields").click()
|
||||
cy.get(".modal")
|
||||
.get("button.primary")
|
||||
.click()
|
||||
cy.getComponent(fieldGroupId).within(() => {
|
||||
cy.contains("name").should("exist")
|
||||
cy.contains("age").should("exist")
|
||||
cy.contains("type").should("exist")
|
||||
})
|
||||
cy.getComponent(fieldGroupId)
|
||||
.find("input")
|
||||
.should("have.length", 2)
|
||||
cy.getComponent(fieldGroupId)
|
||||
.find(".spectrum-Picker")
|
||||
.should("have.length", 1)
|
||||
})
|
||||
cy.getComponent(fieldGroupId)
|
||||
.find("input")
|
||||
.should("have.length", 2)
|
||||
cy.getComponent(fieldGroupId)
|
||||
.find(".spectrum-Picker")
|
||||
.should("have.length", 1)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
it("deletes a component", () => {
|
||||
cy.addComponent("Elements", "Paragraph").then(componentId => {
|
||||
cy.get("[data-cy=setting-_instanceName] input")
|
||||
.type(componentId)
|
||||
.blur()
|
||||
cy.get(".ui-nav ul .nav-item.selected .ri-more-line").click({
|
||||
force: true,
|
||||
it("deletes a component", () => {
|
||||
cy.addComponent("Elements", "Paragraph").then(componentId => {
|
||||
cy.get("[data-cy=setting-_instanceName] input")
|
||||
.type(componentId)
|
||||
.blur()
|
||||
cy.get(".ui-nav ul .nav-item.selected .ri-more-line").click({
|
||||
force: true,
|
||||
})
|
||||
cy.get(".dropdown-container")
|
||||
.contains("Delete")
|
||||
.click()
|
||||
cy.get(".modal")
|
||||
.contains("Delete Component")
|
||||
.click()
|
||||
cy.getComponent(componentId).should("not.exist")
|
||||
})
|
||||
cy.get(".dropdown-container")
|
||||
.contains("Delete")
|
||||
.click()
|
||||
cy.get(".modal")
|
||||
.contains("Delete Component")
|
||||
.click()
|
||||
cy.getComponent(componentId).should("not.exist")
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,21 +1,25 @@
|
|||
context("Screen Tests", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
cy.navigateToFrontend()
|
||||
})
|
||||
import filterTests from "../support/filterTests"
|
||||
|
||||
it("Should successfully create a screen", () => {
|
||||
cy.createScreen("Test Screen", "/test")
|
||||
cy.get(".nav-items-container").within(() => {
|
||||
cy.contains("/test").should("exist")
|
||||
filterTests(["smoke", "all"], () => {
|
||||
context("Screen Tests", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
cy.navigateToFrontend()
|
||||
})
|
||||
})
|
||||
|
||||
it("Should update the url", () => {
|
||||
cy.createScreen("Test Screen", "test with spaces")
|
||||
cy.get(".nav-items-container").within(() => {
|
||||
cy.contains("/test-with-spaces").should("exist")
|
||||
it("Should successfully create a screen", () => {
|
||||
cy.createScreen("Test Screen", "/test")
|
||||
cy.get(".nav-items-container").within(() => {
|
||||
cy.contains("/test").should("exist")
|
||||
})
|
||||
})
|
||||
|
||||
it("Should update the url", () => {
|
||||
cy.createScreen("Test Screen", "test with spaces")
|
||||
cy.get(".nav-items-container").within(() => {
|
||||
cy.contains("/test-with-spaces").should("exist")
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,74 +1,113 @@
|
|||
context("Create a Table", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
})
|
||||
import filterTests from "../support/filterTests"
|
||||
|
||||
it("should create a new Table", () => {
|
||||
cy.createTable("dog")
|
||||
cy.wait(1000)
|
||||
// Check if Table exists
|
||||
cy.get(".table-title h1").should("have.text", "dog")
|
||||
})
|
||||
filterTests(["smoke", "all"], () => {
|
||||
context("Create a Table", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
})
|
||||
|
||||
it("adds a new column to the table", () => {
|
||||
cy.addColumn("dog", "name", "Text")
|
||||
cy.contains("name").should("be.visible")
|
||||
})
|
||||
it("should create a new Table", () => {
|
||||
cy.createTable("dog")
|
||||
cy.wait(1000)
|
||||
// Check if Table exists
|
||||
cy.get(".table-title h1").should("have.text", "dog")
|
||||
})
|
||||
|
||||
it("creates a row in the table", () => {
|
||||
cy.addRow(["Rover"])
|
||||
cy.contains("Rover").should("be.visible")
|
||||
})
|
||||
it("adds a new column to the table", () => {
|
||||
cy.addColumn("dog", "name", "Text")
|
||||
cy.contains("name").should("be.visible")
|
||||
})
|
||||
|
||||
it("updates a column on the table", () => {
|
||||
cy.get(".title").click()
|
||||
cy.get(".spectrum-Table-editIcon > use").click()
|
||||
cy.get("input").eq(1).type("updated", { force: true })
|
||||
// Unset table display column
|
||||
cy.get(".spectrum-Switch-input").eq(1).click()
|
||||
cy.contains("Save Column").click()
|
||||
cy.contains("nameupdated ").should("contain", "nameupdated")
|
||||
})
|
||||
it("creates a row in the table", () => {
|
||||
cy.addRow(["Rover"])
|
||||
cy.contains("Rover").should("be.visible")
|
||||
})
|
||||
|
||||
|
||||
it("edits a row", () => {
|
||||
cy.contains("button", "Edit").click({ force: true })
|
||||
cy.wait(1000)
|
||||
cy.get(".spectrum-Modal input").clear()
|
||||
cy.get(".spectrum-Modal input").type("Updated")
|
||||
cy.contains("Save").click()
|
||||
cy.contains("Updated").should("have.text", "Updated")
|
||||
})
|
||||
|
||||
it("deletes a row", () => {
|
||||
cy.get(".spectrum-Checkbox-input").check({ force: true })
|
||||
cy.contains("Delete 1 row(s)").click()
|
||||
cy.get(".spectrum-Modal").contains("Delete").click()
|
||||
cy.contains("RoverUpdated").should("not.exist")
|
||||
})
|
||||
it("updates a column on the table", () => {
|
||||
cy.get(".title").click()
|
||||
cy.get(".spectrum-Table-editIcon > use").click()
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
|
||||
it("deletes a column", () => {
|
||||
cy.get(".title").click()
|
||||
cy.get(".spectrum-Table-editIcon > use").click()
|
||||
cy.contains("Delete").click()
|
||||
cy.wait(50)
|
||||
cy.get(`[data-cy="delete-column-confirm"]`).type("nameupdated")
|
||||
cy.contains("Delete Column").click()
|
||||
cy.contains("nameupdated").should("not.exist")
|
||||
})
|
||||
|
||||
it("deletes a table", () => {
|
||||
cy.get(".nav-item")
|
||||
.contains("dog")
|
||||
.parents(".nav-item")
|
||||
.first()
|
||||
.within(() => {
|
||||
cy.get(".actions .spectrum-Icon").click({ force: true })
|
||||
cy.get("input").eq(0).type("updated", { force: true })
|
||||
// Unset table display column
|
||||
cy.get(".spectrum-Switch-input").eq(1).click()
|
||||
cy.contains("Save Column").click()
|
||||
})
|
||||
cy.get(".spectrum-Menu > :nth-child(2)").click()
|
||||
cy.get(`[data-cy="delete-table-confirm"]`).type("dog")
|
||||
cy.contains("Delete Table").click()
|
||||
cy.contains("dog").should("not.exist")
|
||||
cy.contains("nameupdated ").should("contain", "nameupdated")
|
||||
})
|
||||
|
||||
it("edits a row", () => {
|
||||
cy.contains("button", "Edit").click({ force: true })
|
||||
cy.wait(1000)
|
||||
cy.get(".spectrum-Modal input").clear()
|
||||
cy.get(".spectrum-Modal input").type("Updated")
|
||||
cy.contains("Save").click()
|
||||
cy.contains("Updated").should("have.text", "Updated")
|
||||
})
|
||||
|
||||
it("deletes a row", () => {
|
||||
cy.get(".spectrum-Checkbox-input").check({ force: true })
|
||||
cy.contains("Delete 1 row(s)").click()
|
||||
cy.get(".spectrum-Modal").contains("Delete").click()
|
||||
cy.contains("RoverUpdated").should("not.exist")
|
||||
})
|
||||
|
||||
if (Cypress.env("TEST_ENV")) {
|
||||
// No Pagination in CI - Test env only for the next two tests
|
||||
it("Adds 15 rows and checks pagination", () => {
|
||||
// 10 rows per page, 15 rows should create 2 pages within table
|
||||
const totalRows = 16
|
||||
for (let i = 1; i < totalRows; i++) {
|
||||
cy.addRow([i])
|
||||
}
|
||||
cy.wait(1000)
|
||||
cy.get(".spectrum-Pagination").within(() => {
|
||||
cy.get(".spectrum-ActionButton").eq(1).click()
|
||||
})
|
||||
cy.get(".spectrum-Pagination").within(() => {
|
||||
cy.get(".spectrum-Body--secondary").contains("Page 2")
|
||||
})
|
||||
})
|
||||
|
||||
it("Deletes rows and checks pagination", () => {
|
||||
// Delete rows, removing second page of rows from table
|
||||
const deleteRows = 5
|
||||
cy.get(".spectrum-Checkbox-input").check({ force: true })
|
||||
cy.get(".spectrum-Table")
|
||||
cy.contains("Delete 5 row(s)").click()
|
||||
cy.get(".spectrum-Modal").contains("Delete").click()
|
||||
cy.wait(1000)
|
||||
|
||||
// Confirm table only has one page
|
||||
cy.get(".spectrum-Pagination").within(() => {
|
||||
cy.get(".spectrum-ActionButton").eq(1).should("not.be.enabled")
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
it("deletes a column", () => {
|
||||
const columnName = "nameupdated"
|
||||
cy.get(".title").click()
|
||||
cy.get(".spectrum-Table-editIcon > use").click()
|
||||
cy.contains("Delete").click()
|
||||
cy.get('[data-cy="delete-column-confirm"]').type(columnName)
|
||||
cy.contains("Delete Column").click()
|
||||
cy.contains("nameupdated").should("not.exist")
|
||||
})
|
||||
|
||||
it("deletes a table", () => {
|
||||
cy.get(".nav-item")
|
||||
.contains("dog")
|
||||
.parents(".nav-item")
|
||||
.first()
|
||||
.within(() => {
|
||||
cy.get(".actions .spectrum-Icon").click({ force: true })
|
||||
})
|
||||
cy.get(".spectrum-Menu > :nth-child(2)").click()
|
||||
cy.get('[data-cy="delete-table-confirm"]').type("dog")
|
||||
cy.contains("Delete Table").click()
|
||||
cy.contains("dog").should("not.exist")
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
context("Create a User", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
})
|
||||
|
||||
it("should create a user", () => {
|
||||
cy.createUser("bbuser@test.com")
|
||||
cy.contains("bbuser").should("be.visible")
|
||||
})
|
||||
})
|
||||
180
packages/builder/cypress/integration/createUserAndRoles.spec.js
Normal file
180
packages/builder/cypress/integration/createUserAndRoles.spec.js
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
import filterTests from "../support/filterTests"
|
||||
|
||||
filterTests(["smoke", "all"], () => {
|
||||
context("Create a User and Assign Roles", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
})
|
||||
|
||||
it("should create a user", () => {
|
||||
cy.createUser("bbuser@test.com")
|
||||
cy.get(".spectrum-Table").should("contain", "bbuser")
|
||||
})
|
||||
|
||||
it("should confirm there is No Access for a New User", () => {
|
||||
// Click into the user
|
||||
cy.contains("bbuser").click()
|
||||
cy.wait(500)
|
||||
// Get No Access table - Confirm it has apps in it
|
||||
cy.get(".spectrum-Table").eq(1).should("not.contain", "No rows found")
|
||||
// Get Configure Roles table - Confirm it has no apps
|
||||
cy.get(".spectrum-Table").eq(0).contains("No rows found")
|
||||
})
|
||||
|
||||
it("should assign role types", () => {
|
||||
// 3 apps minimum required - to assign an app to each role type
|
||||
cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`)
|
||||
.its("body")
|
||||
.then(val => {
|
||||
if (val.length < 3) {
|
||||
for (let i = 1; i < 3; i++) {
|
||||
const uuid = () => Cypress._.random(0, 1e6)
|
||||
const name = uuid()
|
||||
cy.createApp(name)
|
||||
}
|
||||
}
|
||||
})
|
||||
// Navigate back to the user
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`)
|
||||
cy.wait(500)
|
||||
cy.get(".spectrum-SideNav").contains("Users").click()
|
||||
cy.wait(500)
|
||||
cy.get(".spectrum-Table").contains("bbuser").click()
|
||||
cy.wait(1000)
|
||||
for (let i = 0; i < 3; i++) {
|
||||
cy.get(".spectrum-Table")
|
||||
.eq(1)
|
||||
.find(".spectrum-Table-row")
|
||||
.eq(0)
|
||||
.find(".spectrum-Table-cell")
|
||||
.eq(0)
|
||||
.click()
|
||||
cy.wait(500)
|
||||
cy.get(".spectrum-Dialog-grid")
|
||||
.contains("Choose an option")
|
||||
.click()
|
||||
.then(() => {
|
||||
cy.wait(1000)
|
||||
if (i == 0) {
|
||||
cy.get(".spectrum-Popover").contains("Admin").click()
|
||||
}
|
||||
if (i == 1) {
|
||||
cy.get(".spectrum-Popover").contains("Power").click()
|
||||
}
|
||||
if (i == 2) {
|
||||
cy.get(".spectrum-Popover").contains("Basic").click()
|
||||
}
|
||||
cy.wait(1000)
|
||||
cy.get(".spectrum-Button")
|
||||
.contains("Update role")
|
||||
.click({ force: true })
|
||||
})
|
||||
}
|
||||
// Confirm roles exist within Configure roles table
|
||||
cy.wait(2000)
|
||||
cy.get(".spectrum-Table")
|
||||
.eq(0)
|
||||
.within(assginedRoles => {
|
||||
expect(assginedRoles).to.contain("Admin")
|
||||
expect(assginedRoles).to.contain("Power")
|
||||
expect(assginedRoles).to.contain("Basic")
|
||||
})
|
||||
})
|
||||
|
||||
it("should unassign role types", () => {
|
||||
// Set each app within Configure roles table to 'No Access'
|
||||
cy.get(".spectrum-Table")
|
||||
.eq(0)
|
||||
.find(".spectrum-Table-row")
|
||||
.its("length")
|
||||
.then(len => {
|
||||
for (let i = 0; i < len; i++) {
|
||||
cy.get(".spectrum-Table")
|
||||
.eq(0)
|
||||
.find(".spectrum-Table-row")
|
||||
.eq(0)
|
||||
.find(".spectrum-Table-cell")
|
||||
.eq(0)
|
||||
.click()
|
||||
.then(() => {
|
||||
cy.get(".spectrum-Picker").eq(1).click({ force: true })
|
||||
cy.wait(500)
|
||||
cy.get(".spectrum-Popover").contains("No Access").click()
|
||||
})
|
||||
cy.get(".spectrum-Button")
|
||||
.contains("Update role")
|
||||
.click({ force: true })
|
||||
cy.wait(1000)
|
||||
}
|
||||
})
|
||||
// Confirm Configure roles table no longer has any apps in it
|
||||
cy.get(".spectrum-Table").eq(0).contains("No rows found")
|
||||
})
|
||||
|
||||
it("should enable Developer access", () => {
|
||||
// Enable Developer access
|
||||
cy.get(".field")
|
||||
.eq(4)
|
||||
.within(() => {
|
||||
cy.get(".spectrum-Switch-input").click({ force: true })
|
||||
})
|
||||
// No Access table should now be empty
|
||||
cy.get(".container")
|
||||
.contains("No Access")
|
||||
.parent()
|
||||
.within(() => {
|
||||
cy.get(".spectrum-Table").contains("No rows found")
|
||||
})
|
||||
|
||||
// Each app within Configure roles should have Admin access
|
||||
cy.get(".spectrum-Table")
|
||||
.eq(0)
|
||||
.find(".spectrum-Table-row")
|
||||
.its("length")
|
||||
.then(len => {
|
||||
for (let i = 0; i < len; i++) {
|
||||
cy.get(".spectrum-Table")
|
||||
.eq(0)
|
||||
.find(".spectrum-Table-row")
|
||||
.eq(i)
|
||||
.contains("Admin")
|
||||
cy.wait(500)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
it("should disable Developer access", () => {
|
||||
// Disable Developer access
|
||||
cy.get(".field")
|
||||
.eq(4)
|
||||
.within(() => {
|
||||
cy.get(".spectrum-Switch-input").click({ force: true })
|
||||
})
|
||||
// Configure roles table should now be empty
|
||||
cy.get(".container")
|
||||
.contains("Configure roles")
|
||||
.parent()
|
||||
.within(() => {
|
||||
cy.get(".spectrum-Table").contains("No rows found")
|
||||
})
|
||||
})
|
||||
|
||||
it("should delete a user", () => {
|
||||
// Click Delete user button
|
||||
cy.get(".spectrum-Button")
|
||||
.contains("Delete user")
|
||||
.click({ force: true })
|
||||
.then(() => {
|
||||
// Confirm deletion within modal
|
||||
cy.wait(500)
|
||||
cy.get(".spectrum-Dialog-grid").within(() => {
|
||||
cy.get(".spectrum-Button")
|
||||
.contains("Delete user")
|
||||
.click({ force: true })
|
||||
cy.wait(4000)
|
||||
})
|
||||
})
|
||||
cy.get(".spectrum-Table").should("not.have.text", "bbuser")
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -1,152 +1,156 @@
|
|||
context("Create a View", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
cy.createTable("data")
|
||||
cy.addColumn("data", "group", "Text")
|
||||
cy.addColumn("data", "age", "Number")
|
||||
cy.addColumn("data", "rating", "Number")
|
||||
import filterTests from "../support/filterTests"
|
||||
|
||||
// 6 Rows
|
||||
cy.addRow(["Students", 25, 1])
|
||||
cy.addRow(["Students", 20, 3])
|
||||
cy.addRow(["Students", 18, 6])
|
||||
cy.addRow(["Students", 25, 2])
|
||||
cy.addRow(["Teachers", 49, 5])
|
||||
cy.addRow(["Teachers", 36, 3])
|
||||
})
|
||||
filterTests(['smoke', 'all'], () => {
|
||||
context("Create a View", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
cy.createTable("data")
|
||||
cy.addColumn("data", "group", "Text")
|
||||
cy.addColumn("data", "age", "Number")
|
||||
cy.addColumn("data", "rating", "Number")
|
||||
|
||||
it("creates a view", () => {
|
||||
cy.contains("Create view").click()
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.get("input").type("Test View")
|
||||
cy.get("button").contains("Create View").click({ force: true })
|
||||
// 6 Rows
|
||||
cy.addRow(["Students", 25, 1])
|
||||
cy.addRow(["Students", 20, 3])
|
||||
cy.addRow(["Students", 18, 6])
|
||||
cy.addRow(["Students", 25, 2])
|
||||
cy.addRow(["Teachers", 49, 5])
|
||||
cy.addRow(["Teachers", 36, 3])
|
||||
})
|
||||
cy.get(".table-title h1").contains("Test View")
|
||||
cy.get(".title").then($headers => {
|
||||
expect($headers).to.have.length(3)
|
||||
const headers = Array.from($headers).map(header =>
|
||||
header.textContent.trim()
|
||||
)
|
||||
expect(removeSpacing(headers)).to.deep.eq(["group", "age", "rating"])
|
||||
|
||||
it("creates a view", () => {
|
||||
cy.contains("Create view").click()
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.get("input").type("Test View")
|
||||
cy.get("button").contains("Create View").click({ force: true })
|
||||
})
|
||||
cy.get(".table-title h1").contains("Test View")
|
||||
cy.get(".title").then($headers => {
|
||||
expect($headers).to.have.length(3)
|
||||
const headers = Array.from($headers).map(header =>
|
||||
header.textContent.trim()
|
||||
)
|
||||
expect(removeSpacing(headers)).to.deep.eq(["group", "age", "rating"])
|
||||
})
|
||||
})
|
||||
|
||||
it("filters the view by age over 10", () => {
|
||||
cy.contains("Filter").click()
|
||||
cy.contains("Add Filter").click()
|
||||
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.get(".spectrum-Picker-label").eq(0).click()
|
||||
cy.contains("age").click({ force: true })
|
||||
|
||||
cy.get(".spectrum-Picker-label").eq(1).click()
|
||||
cy.contains("More Than").click({ force: true })
|
||||
|
||||
cy.get("input").type(18)
|
||||
cy.contains("Save").click()
|
||||
})
|
||||
|
||||
cy.get(".spectrum-Table-row").get($values => {
|
||||
expect($values).to.have.length(5)
|
||||
})
|
||||
})
|
||||
|
||||
it("creates a stats calculation view based on age", () => {
|
||||
cy.wait(1000)
|
||||
cy.contains("Calculate").click()
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.get(".spectrum-Picker-label").eq(0).click()
|
||||
cy.contains("Statistics").click()
|
||||
|
||||
cy.get(".spectrum-Picker-label").eq(1).click()
|
||||
cy.contains("age").click({ force: true })
|
||||
|
||||
cy.get(".spectrum-Button").contains("Save").click({ force: true })
|
||||
})
|
||||
cy.wait(1000)
|
||||
|
||||
cy.get(".title").then($headers => {
|
||||
expect($headers).to.have.length(7)
|
||||
const headers = Array.from($headers).map(header =>
|
||||
header.textContent.trim()
|
||||
)
|
||||
expect(removeSpacing(headers)).to.deep.eq([
|
||||
"field",
|
||||
"sum",
|
||||
"min",
|
||||
"max",
|
||||
"count",
|
||||
"sumsqr",
|
||||
"avg",
|
||||
])
|
||||
})
|
||||
cy.get(".spectrum-Table-cell").then($values => {
|
||||
let values = Array.from($values).map(header => header.textContent.trim())
|
||||
expect(values).to.deep.eq(["age", "155", "20", "49", "5", "5347", "31"])
|
||||
})
|
||||
})
|
||||
|
||||
it("groups the view by group", () => {
|
||||
cy.contains("Group by").click()
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.get(".spectrum-Picker-label").eq(0).click()
|
||||
cy.contains("group").click()
|
||||
cy.contains("Save").click()
|
||||
})
|
||||
cy.wait(1000)
|
||||
cy.contains("Students").should("be.visible")
|
||||
cy.contains("Teachers").should("be.visible")
|
||||
|
||||
cy.get(".spectrum-Table-cell").then($values => {
|
||||
let values = Array.from($values).map(header => header.textContent.trim())
|
||||
expect(values).to.deep.eq([
|
||||
"Students",
|
||||
"70",
|
||||
"20",
|
||||
"25",
|
||||
"3",
|
||||
"1650",
|
||||
"23.333333333333332",
|
||||
"Teachers",
|
||||
"85",
|
||||
"36",
|
||||
"49",
|
||||
"2",
|
||||
"3697",
|
||||
"42.5",
|
||||
])
|
||||
})
|
||||
})
|
||||
|
||||
it("renames a view", () => {
|
||||
cy.contains(".nav-item", "Test View")
|
||||
.find(".actions .icon")
|
||||
.click({ force: true })
|
||||
cy.get(".spectrum-Menu-itemLabel").contains("Edit").click()
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.get("input").type(" Updated")
|
||||
cy.contains("Save").click()
|
||||
})
|
||||
cy.wait(1000)
|
||||
cy.contains("Test View Updated").should("be.visible")
|
||||
})
|
||||
|
||||
it("deletes a view", () => {
|
||||
cy.contains(".nav-item", "Test View Updated")
|
||||
.find(".actions .icon")
|
||||
.click({ force: true })
|
||||
cy.contains("Delete").click()
|
||||
cy.contains("Delete View").click()
|
||||
cy.wait(500)
|
||||
cy.contains("TestView Updated").should("not.exist")
|
||||
})
|
||||
})
|
||||
|
||||
it("filters the view by age over 10", () => {
|
||||
cy.contains("Filter").click()
|
||||
cy.contains("Add Filter").click()
|
||||
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.get(".spectrum-Picker-label").eq(0).click()
|
||||
cy.contains("age").click({ force: true })
|
||||
|
||||
cy.get(".spectrum-Picker-label").eq(1).click()
|
||||
cy.contains("More Than").click({ force: true })
|
||||
|
||||
cy.get("input").type(18)
|
||||
cy.contains("Save").click()
|
||||
})
|
||||
|
||||
cy.get(".spectrum-Table-row").get($values => {
|
||||
expect($values).to.have.length(5)
|
||||
})
|
||||
})
|
||||
|
||||
it("creates a stats calculation view based on age", () => {
|
||||
cy.wait(1000)
|
||||
cy.contains("Calculate").click()
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.get(".spectrum-Picker-label").eq(0).click()
|
||||
cy.contains("Statistics").click()
|
||||
|
||||
cy.get(".spectrum-Picker-label").eq(1).click()
|
||||
cy.contains("age").click({ force: true })
|
||||
|
||||
cy.get(".spectrum-Button").contains("Save").click({ force: true })
|
||||
})
|
||||
cy.wait(1000)
|
||||
|
||||
cy.get(".title").then($headers => {
|
||||
expect($headers).to.have.length(7)
|
||||
const headers = Array.from($headers).map(header =>
|
||||
header.textContent.trim()
|
||||
)
|
||||
expect(removeSpacing(headers)).to.deep.eq([
|
||||
"field",
|
||||
"sum",
|
||||
"min",
|
||||
"max",
|
||||
"count",
|
||||
"sumsqr",
|
||||
"avg",
|
||||
])
|
||||
})
|
||||
cy.get(".spectrum-Table-cell").then($values => {
|
||||
let values = Array.from($values).map(header => header.textContent.trim())
|
||||
expect(values).to.deep.eq(["age", "155", "20", "49", "5", "5347", "31"])
|
||||
})
|
||||
})
|
||||
|
||||
it("groups the view by group", () => {
|
||||
cy.contains("Group by").click()
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.get(".spectrum-Picker-label").eq(0).click()
|
||||
cy.contains("group").click()
|
||||
cy.contains("Save").click()
|
||||
})
|
||||
cy.wait(1000)
|
||||
cy.contains("Students").should("be.visible")
|
||||
cy.contains("Teachers").should("be.visible")
|
||||
|
||||
cy.get(".spectrum-Table-cell").then($values => {
|
||||
let values = Array.from($values).map(header => header.textContent.trim())
|
||||
expect(values).to.deep.eq([
|
||||
"Students",
|
||||
"70",
|
||||
"20",
|
||||
"25",
|
||||
"3",
|
||||
"1650",
|
||||
"23.333333333333332",
|
||||
"Teachers",
|
||||
"85",
|
||||
"36",
|
||||
"49",
|
||||
"2",
|
||||
"3697",
|
||||
"42.5",
|
||||
])
|
||||
})
|
||||
})
|
||||
|
||||
it("renames a view", () => {
|
||||
cy.contains(".nav-item", "Test View")
|
||||
.find(".actions .icon")
|
||||
.click({ force: true })
|
||||
cy.get(".spectrum-Menu-itemLabel").contains("Edit").click()
|
||||
cy.get(".modal-inner-wrapper").within(() => {
|
||||
cy.get("input").type(" Updated")
|
||||
cy.contains("Save").click()
|
||||
})
|
||||
cy.wait(1000)
|
||||
cy.contains("Test View Updated").should("be.visible")
|
||||
})
|
||||
|
||||
it("deletes a view", () => {
|
||||
cy.contains(".nav-item", "Test View Updated")
|
||||
.find(".actions .icon")
|
||||
.click({ force: true })
|
||||
cy.contains("Delete").click()
|
||||
cy.contains("Delete View").click()
|
||||
cy.wait(500)
|
||||
cy.contains("TestView Updated").should("not.exist")
|
||||
})
|
||||
})
|
||||
|
||||
function removeSpacing(headers) {
|
||||
let newHeaders = []
|
||||
for (let header of headers) {
|
||||
newHeaders.push(header.replace(/\s\s+/g, " "))
|
||||
function removeSpacing(headers) {
|
||||
let newHeaders = []
|
||||
for (let header of headers) {
|
||||
newHeaders.push(header.replace(/\s\s+/g, " "))
|
||||
}
|
||||
return newHeaders
|
||||
}
|
||||
return newHeaders
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,84 +1,87 @@
|
|||
xcontext("Custom Theming Properties", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
cy.navigateToFrontend()
|
||||
})
|
||||
import filterTests from "../support/filterTests"
|
||||
|
||||
/* Default Values:
|
||||
Button roundness = Large
|
||||
Accent colour = Blue 600
|
||||
Accent colour (hover) = Blue 500
|
||||
Navigation bar background colour = Gray 100
|
||||
Navigation bar text colour = Gray 800 */
|
||||
it("should reset the color property values", () => {
|
||||
// Open Theme modal and change colours
|
||||
cy.get(".spectrum-ActionButton-label").contains("Theme").click()
|
||||
cy.get(".spectrum-Picker").contains("Large").click()
|
||||
.parents()
|
||||
.get(".spectrum-Menu-itemLabel").contains("None").click()
|
||||
changeThemeColors()
|
||||
// Reset colours
|
||||
cy.get(".spectrum-Button-label").contains("Reset").click({force: true})
|
||||
// Check values have reset
|
||||
checkThemeColorDefaults()
|
||||
})
|
||||
|
||||
/* Button Roundness Values:
|
||||
None = 0
|
||||
Small = 4px
|
||||
Medium = 8px
|
||||
Large = 16px */
|
||||
it("should test button roundness", () => {
|
||||
const buttonRoundnessValues = ["0", "4px", "8px", "16px"]
|
||||
cy.wait(1000)
|
||||
// Add button, change roundness and confirm value
|
||||
cy.addComponent("Button", null).then((componentId) => {
|
||||
buttonRoundnessValues.forEach(function (item, index){
|
||||
cy.get(".spectrum-ActionButton-label").contains("Theme").click()
|
||||
cy.get(".setting").contains("Button roundness").parent()
|
||||
.get(".select-wrapper").click()
|
||||
cy.get(".spectrum-Popover").find('li').eq(index).click()
|
||||
cy.get(".spectrum-Button").contains("View changes").click({force: true})
|
||||
cy.reload()
|
||||
cy.getComponent(componentId)
|
||||
.parents(".svelte-xiqd1c").eq(0).should('have.attr', 'style').and('contains', `--buttonBorderRadius:${item}`)
|
||||
filterTests(['all'], () => {
|
||||
xcontext("Custom Theming Properties", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
cy.navigateToFrontend()
|
||||
})
|
||||
|
||||
/* Default Values:
|
||||
Button roundness = Large
|
||||
Accent colour = Blue 600
|
||||
Accent colour (hover) = Blue 500
|
||||
Navigation bar background colour = Gray 100
|
||||
Navigation bar text colour = Gray 800 */
|
||||
it("should reset the color property values", () => {
|
||||
// Open Theme modal and change colours
|
||||
cy.get(".spectrum-ActionButton-label").contains("Theme").click()
|
||||
cy.get(".spectrum-Picker").contains("Large").click()
|
||||
.parents()
|
||||
.get(".spectrum-Menu-itemLabel").contains("None").click()
|
||||
changeThemeColors()
|
||||
// Reset colours
|
||||
cy.get(".spectrum-Button-label").contains("Reset").click({force: true})
|
||||
// Check values have reset
|
||||
checkThemeColorDefaults()
|
||||
})
|
||||
|
||||
/* Button Roundness Values:
|
||||
None = 0
|
||||
Small = 4px
|
||||
Medium = 8px
|
||||
Large = 16px */
|
||||
it("should test button roundness", () => {
|
||||
const buttonRoundnessValues = ["0", "4px", "8px", "16px"]
|
||||
cy.wait(1000)
|
||||
// Add button, change roundness and confirm value
|
||||
cy.addComponent("Button", null).then((componentId) => {
|
||||
buttonRoundnessValues.forEach(function (item, index){
|
||||
cy.get(".spectrum-ActionButton-label").contains("Theme").click()
|
||||
cy.get(".setting").contains("Button roundness").parent()
|
||||
.get(".select-wrapper").click()
|
||||
cy.get(".spectrum-Popover").find('li').eq(index).click()
|
||||
cy.get(".spectrum-Button").contains("View changes").click({force: true})
|
||||
cy.reload()
|
||||
cy.getComponent(componentId)
|
||||
.parents(".svelte-xiqd1c").eq(0).should('have.attr', 'style').and('contains', `--buttonBorderRadius:${item}`)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
const changeThemeColors = () => {
|
||||
// Changes the theme colours
|
||||
cy.get(".spectrum-FieldLabel").contains("Accent color")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.find('[title="Red 400"]').click()
|
||||
cy.get(".spectrum-FieldLabel").contains("Accent color (hover)")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.find('[title="Orange 400"]').click()
|
||||
cy.get(".spectrum-FieldLabel").contains("Navigation bar background color")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.find('[title="Yellow 400"]').click()
|
||||
cy.get(".spectrum-FieldLabel").contains("Navigation bar text color")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.find('[title="Green 400"]').click()
|
||||
}
|
||||
|
||||
const checkThemeColorDefaults = () => {
|
||||
cy.get(".spectrum-FieldLabel").contains("Accent color")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.get('[title="Blue 600"]').children().find('[aria-label="Checkmark"]')
|
||||
cy.get(".spectrum-Dialog-grid").click()
|
||||
cy.get(".spectrum-FieldLabel").contains("Accent color (hover)")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.get('[title="Blue 500"]').children().find('[aria-label="Checkmark"]')
|
||||
cy.get(".spectrum-Dialog-grid").click()
|
||||
cy.get(".spectrum-FieldLabel").contains("Navigation bar background color")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.get('[title="Gray 100"]').children().find('[aria-label="Checkmark"]')
|
||||
cy.get(".spectrum-Dialog-grid").click()
|
||||
cy.get(".spectrum-FieldLabel").contains("Navigation bar text color")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.get('[title="Gray 800"]').children().find('[aria-label="Checkmark"]')
|
||||
}
|
||||
})
|
||||
|
||||
const changeThemeColors = () => {
|
||||
// Changes the theme colours
|
||||
cy.get(".spectrum-FieldLabel").contains("Accent color")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.find('[title="Red 400"]').click()
|
||||
cy.get(".spectrum-FieldLabel").contains("Accent color (hover)")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.find('[title="Orange 400"]').click()
|
||||
cy.get(".spectrum-FieldLabel").contains("Navigation bar background color")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.find('[title="Yellow 400"]').click()
|
||||
cy.get(".spectrum-FieldLabel").contains("Navigation bar text color")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.find('[title="Green 400"]').click()
|
||||
}
|
||||
|
||||
const checkThemeColorDefaults = () => {
|
||||
cy.get(".spectrum-FieldLabel").contains("Accent color")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.get('[title="Blue 600"]').children().find('[aria-label="Checkmark"]')
|
||||
cy.get(".spectrum-Dialog-grid").click()
|
||||
cy.get(".spectrum-FieldLabel").contains("Accent color (hover)")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.get('[title="Blue 500"]').children().find('[aria-label="Checkmark"]')
|
||||
cy.get(".spectrum-Dialog-grid").click()
|
||||
cy.get(".spectrum-FieldLabel").contains("Navigation bar background color")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.get('[title="Gray 100"]').children().find('[aria-label="Checkmark"]')
|
||||
cy.get(".spectrum-Dialog-grid").click()
|
||||
cy.get(".spectrum-FieldLabel").contains("Navigation bar text color")
|
||||
.parent().find(".container.svelte-z3cm5a").click()
|
||||
.get('[title="Gray 800"]').children().find('[aria-label="Checkmark"]')
|
||||
}
|
||||
|
||||
})
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue