diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md deleted file mode 100644 index 1be855e3fa..0000000000 --- a/.github/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,76 +0,0 @@ -# Contributor Covenant Code of Conduct - -## Our Pledge - -In the interest of fostering an open and welcoming environment, we as -contributors and maintainers pledge to making participation in our project and -our community a harassment-free experience for everyone, regardless of age, body -size, disability, ethnicity, sex characteristics, gender identity and expression, -level of experience, education, socio-economic status, nationality, personal -appearance, race, religion, or sexual identity and orientation. - -## Our Standards - -Examples of behavior that contributes to creating a positive environment -include: - -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members - -Examples of unacceptable behavior by participants include: - -* The use of sexualized language or imagery and unwelcome sexual attention or - advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic - address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a - professional setting - -## Our Responsibilities - -Project maintainers are responsible for clarifying the standards of acceptable -behavior and are expected to take appropriate and fair corrective action in -response to any instances of unacceptable behavior. - -Project maintainers have the right and responsibility to remove, edit, or -reject comments, commits, code, wiki edits, issues, and other contributions -that are not aligned to this Code of Conduct, or to ban temporarily or -permanently any contributor for other behaviors that they deem inappropriate, -threatening, offensive, or harmful. - -## Scope - -This Code of Conduct applies both within project spaces and in public spaces -when an individual is representing the project or its community. Examples of -representing a project or community include using an official project e-mail -address, posting via an official social media account, or acting as an appointed -representative at an online or offline event. Representation of a project may be -further defined and clarified by project maintainers. - -## Enforcement - -Instances of abusive, harassing, or otherwise unacceptable behavior may be -reported by contacting the project team at community@budibase.com. All -complaints will be reviewed and investigated and will result in a response that -is deemed necessary and appropriate to the circumstances. The project team is -obligated to maintain confidentiality with regard to the reporter of an incident. -Further details of specific enforcement policies may be posted separately. - -Project maintainers who do not follow or enforce the Code of Conduct in good -faith may face temporary or permanent repercussions as determined by other -members of the project's leadership. - -## Attribution - -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, -available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html - -[homepage]: https://www.contributor-covenant.org - -For answers to common questions about this code of conduct, see -https://www.contributor-covenant.org/faq diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md new file mode 120000 index 0000000000..d28e66efdc --- /dev/null +++ b/.github/CODE_OF_CONDUCT.md @@ -0,0 +1 @@ +../docs/CODE_OF_CONDUCT.md \ No newline at end of file diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md deleted file mode 100644 index bd21123709..0000000000 --- a/.github/CONTRIBUTING.md +++ /dev/null @@ -1,208 +0,0 @@ -# Contributing - -From opening a bug report to creating a pull request: every contribution is appreciated and welcome. If you're planning to implement a new feature or change the api please create an issue first. This way we can ensure that your precious work is not in vain. - -## Not Sure Where to Start? - -Budibase is a low-code web application builder that creates svelte based web applications. - -Budibase is a monorepo managed by [lerna](https://github.com/lerna/lerna). Lerna manages the building and publishing of the budibase packages. At a high level, here are the packages that make up budibase. - -- **packages/builder** - contains code for the budibase builder client side svelte application. - -- **packages/client** - A module that runs in the browser responsible for reading JSON definition and creating living, breathing web apps from it. - -- **packages/server** - The budibase server. This [Koa](https://koajs.com/) app is responsible for serving the JS for the builder and budibase apps, as well as providing the API for interaction with the database and file system. - -- **packages/worker** - This [Koa](https://koajs.com/) app is responsible for providing global apis for managing your budibase installation. Authentication, Users, Email, Org and Auth configs are all provided by the worker. - -## Contributor License Agreement (CLA) - -In order to accept your pull request, we need you to submit a CLA. You only need to do this once. If you are submitting a pull request for the first time, just submit a Pull Request and our CLA Bot will give you instructions on how to sign the CLA before merging your Pull Request. - -All contributors must sign an [Individual Contributor License Agreement](https://github.com/budibase/budibase/blob/next/.github/cla/individual-cla.md). - -If contributing on behalf of your company, your company must sign a [Corporate Contributor License Agreement](https://github.com/budibase/budibase/blob/next/.github/cla/corporate-cla.md). If so, please contact us via community@budibase.com. - -## Glossary of Terms - -To understand the budibase API, it can be helpful to understand the top level entities that make up Budibase. - -### Client - -A client represents a single budibase customer. Each budibase client will have 1 or more budibase servers. Every client is assigned a unique ID. - -### App - -A client can have one or more budibase applications. Budibase applications would be things like "Developer Inventory Management" or "Goat Herder CRM". Think of a budibase application as a tree. - -### Database - -An App can have one or more databases. Keeping with our [dendrology](https://en.wikipedia.org/wiki/Dendrology) analogy - think of an database as a branch on the tree. Databases are used to keep data separate for different instances of your app. For example, if you had a CRM app, you may create a database for your US office, and a database for your Australian office. Databases allow us to support [multitenancy](https://www.gartner.com/en/information-technology/glossary/multitenancy) in budibase applications. - -### Table - -Tables in budibase are almost akin to tables in relational databases. A table may be a "Car" or an "Employee". They are the main building blocks for the creation and management of backend data in budibase. - -### View - -A View is an advanced feature in budibase that allows you to write a custom query using [MapReduce](https://pouchdb.com/guides/queries.html) queries. Views enable powerful query functionality and calculations, allowing you to do more with your data. - -### Page - -A page in budibase is actually a single, self contained svelte web app. There are only 2 pages in budibase. The **login** page and the **main** page. - -### Screen - -A screen is a component within a single page. Generally, screens represent client side routes, and can be switched without refreshing the page. - -### Component - -A component is the basic frontend building block of a budibase app. - -### Component Library - -Component libraries are collections of components as well as the definition of their props contained in a file called `components.json`. - -## Contributing to Budibase - -* Please maintain the existing code style. - -* Please try to keep your commits small and focused. - -* Please write tests. - -* If the project diverges from your branch, please rebase instead of merging. This makes the commit graph easier to read. - -* Once your work is completed, please raise a PR against the `develop` branch with some information about what has changed and why. - -### Getting Started For Contributors -#### 1. Prerequisites - -NodeJS Version `14.x.x` - -*yarn -* `npm install -g yarn` - -*jest* - `npm install -g jest` - -#### 2. Clone this repository - -`git clone https://github.com/Budibase/budibase.git` - -then `cd ` into your local copy. - -#### 3. Install and Build - -| **NOTE**: On Windows, all yarn commands must be executed on a bash shell (e.g. git bash) - -To develop the Budibase platform you'll need [Docker](https://www.docker.com/) and [Docker Compose](https://docs.docker.com/compose/) installed. - -##### Quick method - -`yarn setup` will check that all necessary components are installed and setup the repo for usage. - -##### Manual method - -The following commands can be executed to manually get Budibase up and running (assuming Docker/Docker Compose has been installed). - -`yarn` to install project dependencies - -`yarn bootstrap` will install all budibase modules and symlink them together using lerna. - -`yarn build` will build all budibase packages. - -#### 4. Running - -To run the budibase server and builder in dev mode (i.e. with live reloading): - -1. Open a new console -2. `yarn dev` (from root) -3. Access the builder on http://localhost:10000/builder - -This will enable watch mode for both the builder app, server, client library and any component libraries. - -#### 5. Debugging using VS Code - -To debug the budibase server and worker a VS Code launch configuration has been provided. - -Visit the debug window and select `Budibase Server` or `Budibase Worker` to debug the respective component. -Alternatively to start both components simultaneously select `Start Budibase`. - -In addition to the above, the remaining budibase components may be ran in dev mode using: `yarn dev:noserver`. - -#### 6. Cleanup - -If you wish to delete all the apps created in development and reset the environment then run the following: - -1. `yarn nuke:docker` will wipe all the Budibase services -2. `yarn dev` will restart all the services - -### Backend - -For the backend we run [Redis](https://redis.io/), [CouchDB](https://couchdb.apache.org/), [MinIO](https://min.io/) and [NGINX](https://www.nginx.com/) in Docker compose. This means that to develop Budibase you will need Docker and Docker compose installed. The backend services are then ran separately as Node services with nodemon so that they can be debugged outside of Docker. - -### Data Storage - -When you are running locally, budibase stores data on disk using docker volumes. The volumes and the types of data associated with each are: - -- `redis_data` - - Sessions, email tokens -- `couchdb3_data` - - Global and app databases -- `minio_data` - - App manifest, budibase client, static assets - -### Devlopment Modes - -A combination of environment variables controls the mode that budibase runs in. -Yarn commands can be used to mimic the different modes that budibase can be ran in - -#### Self Hosted -The default mode. A single tenant installation with no usage restrictions. - -To enable this mode, use: -``` -yarn mode:self -``` - -#### Cloud -The cloud mode, with account portal turned off. - -To enable this mode, use: -``` -yarn mode:cloud -``` -#### Cloud & Account -The cloud mode, with account portal turned on. This is a replica of the mode that runs at https://budibase.app - - -To enable this mode, use: -``` -yarn mode:account -``` -### CI - An overview of the CI pipelines can be found [here](./workflows/README.md) -### Troubleshooting - -Sometimes, things go wrong. This can be due to incompatible updates on the budibase platform. To clear down your development environment and start again follow **Step 6. Cleanup**, then proceed from **Step 3. Install and Build** in the setup guide above. You should have a fresh Budibase installation. -### Running tests - -#### End-to-end Tests - -Budibase uses Cypress to run a number of E2E tests. To run the tests execute the following command in the root folder: - -``` -yarn test:e2e -``` - -Or if you are in the builder you can run `yarn cy:test`. - - -### Other Useful Information - -* The contributors are listed in [AUTHORS.md](https://github.com/Budibase/budibase/blob/master/.github/AUTHORS.md) (add yourself). - -* This project uses a modified version of the MPLv2 license, see [LICENSE](https://github.com/budibase/server/blob/master/LICENSE). - -* We use the [C4 (Collective Code Construction Contract)](https://rfc.zeromq.org/spec:42/C4/) process for contributions. - Please read this if you are unfamiliar with it. diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md new file mode 120000 index 0000000000..c81d5e88a2 --- /dev/null +++ b/.github/CONTRIBUTING.md @@ -0,0 +1 @@ +../docs/CONTRIBUTING.md \ No newline at end of file diff --git a/.github/workflows/README.md b/.github/workflows/README.md index d2fcd16bb0..5929a0540a 100644 --- a/.github/workflows/README.md +++ b/.github/workflows/README.md @@ -24,14 +24,14 @@ The standard CI Build job is what runs when you raise a PR to develop or master. Triggers: - Push to develop -The job responsible for building, tagging and pushing docker images out to the test and staging environments. +The job responsible for building, tagging and pushing docker images out to the test and release environments. - Installs all dependencies - builds the project - run the unit tests - publish the budibase JS packages under a prerelease tag to NPM - build, tag and push docker images under the `develop` tag to docker hub -These images will then be pulled by the test and staging environments, updating the latest automatically. Discord notifications are sent to the #infra channel when this occurs. +These images will then be pulled by the test and release environments, updating the latest automatically. Discord notifications are sent to the #infra channel when this occurs. ### Release Job (release.yml) Triggers: @@ -57,8 +57,33 @@ This job relies on the release job to have run first, so the latest image is pus - Build and release the budibase helm chart for kubernetes users - Perform a github release with the latest version. You can see previous releases here (https://github.com/Budibase/budibase/releases) +### Deploy Release (deploy-release.yml) +Triggers: +- Manual Workflow Dispatch Trigger -### Cloud Deploy (deploy-cloud.yml) +This job is responsible for deploying to our release, cloud kubernetes environment. You must run the release job first, to ensure that the latest images have been built and pushed to docker hub. After kicking off this job, the following will occur: + +- Checks out the release branch +- Pulls the latest `values.yaml` from budibase infra, a private repo containing budibases infrastructure configuration +- Gets the latest budibase version from `lerna.json`, if it hasn't been specified in the workflow when you kicked it off +- Configures AWS Credentials +- Deploys the helm chart in the budibase repo to our preproduction EKS cluster, injecting the `values.yaml` we pulled from budibase-infra +- Fires off a discord webhook in the #infra channel to show that the deployment completely successfully. + +### Deploy Preprod (deploy-preprod.yml) +Triggers: +- Manual Workflow Dispatch Trigger + +This job is responsible for deploying to our preprod, cloud kubernetes environment. You must run the release job first, to ensure that the latest images have been built and pushed to docker hub. After kicking off this job, the following will occur: + +- Checks out the master branch +- Pulls the latest `values.yaml` from budibase infra, a private repo containing budibases infrastructure configuration +- Gets the latest budibase version from `lerna.json`, if it hasn't been specified in the workflow when you kicked it off +- Configures AWS Credentials +- Deploys the helm chart in the budibase repo to our preprod EKS cluster, injecting the `values.yaml` we pulled from budibase-infra +- Fires off a discord webhook in the #infra channel to show that the deployment completely successfully. + +### Deploy Production (deploy-cloud.yml) Triggers: - Manual Workflow Dispatch Trigger diff --git a/.github/workflows/deploy-cloud.yaml b/.github/workflows/deploy-cloud.yaml index a05f97f097..869a88a5b3 100644 --- a/.github/workflows/deploy-cloud.yaml +++ b/.github/workflows/deploy-cloud.yaml @@ -1,4 +1,4 @@ -name: Budibase Cloud Deploy +name: Budibase Deploy Production on: workflow_dispatch: diff --git a/.github/workflows/deploy-preprod.yml b/.github/workflows/deploy-preprod.yml index ab941100a0..c3f690f568 100644 --- a/.github/workflows/deploy-preprod.yml +++ b/.github/workflows/deploy-preprod.yml @@ -1,4 +1,4 @@ -name: Budibase Release Preprod +name: Budibase Deploy Preprod on: workflow_dispatch: diff --git a/.github/workflows/deploy-release.yml b/.github/workflows/deploy-release.yml new file mode 100644 index 0000000000..0fb8a5fea0 --- /dev/null +++ b/.github/workflows/deploy-release.yml @@ -0,0 +1,77 @@ +name: Budibase Deploy Release + +on: + workflow_dispatch: + +jobs: + release: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v2 + + - name: Configure AWS Credentials + uses: aws-actions/configure-aws-credentials@v1 + with: + aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} + aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} + aws-region: eu-west-1 + + - name: Fail if branch is not develop + if: github.ref != 'refs/heads/develop' + run: | + echo "Ref is not develop, you must run this job from develop." + exit 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:release + docker tag proxy-service budibase/proxy:$RELEASE_TAG + docker push budibase/proxy:$RELEASE_TAG + env: + DOCKER_USER: ${{ secrets.DOCKER_USERNAME }} + DOCKER_PASSWORD: ${{ secrets.DOCKER_API_KEY }} + RELEASE_TAG: k8s-release + + - name: Pull values.yaml from budibase-infra + run: | + curl -H "Authorization: token ${{ secrets.GH_PERSONAL_TOKEN }}" \ + -H 'Accept: application/vnd.github.v3.raw' \ + -o values.release.yaml \ + -L https://api.github.com/repos/budibase/budibase-infra/contents/kubernetes/budibase-release/values.yaml + wc -l values.release.yaml + + - name: Deploy to Release Environment + uses: glopezep/helm@v1.7.1 + with: + release: budibase-release + namespace: budibase + chart: charts/budibase + token: ${{ github.token }} + helm: helm3 + values: | + globals: + appVersion: develop + ingress: + enabled: true + nginx: true + value-files: >- + [ + "values.release.yaml" + ] + env: + KUBECONFIG_FILE: '${{ secrets.RELEASE_KUBECONFIG }}' + + - name: Discord Webhook Action + uses: tsickert/discord-webhook@v4.0.0 + with: + webhook-url: ${{ secrets.PROD_DEPLOY_WEBHOOK_URL }} + content: "Release Env Deployment Complete: ${{ env.RELEASE_VERSION }} deployed to Budibase Release Env." + embed-title: ${{ env.RELEASE_VERSION }} diff --git a/.github/workflows/release-develop.yml b/.github/workflows/release-develop.yml index 71d487e0a3..4502482b23 100644 --- a/.github/workflows/release-develop.yml +++ b/.github/workflows/release-develop.yml @@ -1,10 +1,10 @@ -name: Budibase Release Staging -concurrency: release-develop +name: Budibase Prerelease +concurrency: release-prerelease on: push: branches: - - release + - develop paths: - '.aws/**' - '.github/**' @@ -28,11 +28,11 @@ jobs: runs-on: ubuntu-latest steps: - # - name: Fail if branch is not develop - # if: github.ref != 'refs/heads/develop' - # run: | - # echo "Ref is not develop, you must run this job from develop." - # exit 1 + - name: Fail if branch is not develop + if: github.ref != 'refs/heads/develop' + run: | + echo "Ref is not develop, you must run this job from develop." + exit 1 - uses: actions/checkout@v2 - uses: actions/setup-node@v1 with: diff --git a/README.md b/README.md index 17a3ab1ef2..e8c6475d90 100644 --- a/README.md +++ b/README.md @@ -174,6 +174,7 @@ Budibase is dedicated to providing a welcoming, diverse, and harrassment-free ex ## 🙌 Contributing to Budibase From opening a bug report to creating a pull request: every contribution is appreciated and welcomed. If you're planning to implement a new feature or change the API please create an issue first. This way we can ensure your work is not in vain. +Environment setup instructions are available for [Debian](https://github.com/Budibase/budibase/tree/HEAD/docs/DEV-SETUP-DEBIAN.md) and [MacOSX](https://github.com/Budibase/budibase/tree/HEAD/docs/DEV-SETUP-MACOSX.md) ### Not Sure Where to Start? A good place to start contributing, is the [First time issues project](https://github.com/Budibase/budibase/projects/22). @@ -187,7 +188,7 @@ Budibase is a monorepo managed by lerna. Lerna manages the building and publishi - [packages/server](https://github.com/Budibase/budibase/tree/HEAD/packages/server) - The budibase server. This Koa app is responsible for serving the JS for the builder and budibase apps, as well as providing the API for interaction with the database and file system. -For more information, see [CONTRIBUTING.md](https://github.com/Budibase/budibase/blob/HEAD/.github/CONTRIBUTING.md) +For more information, see [CONTRIBUTING.md](https://github.com/Budibase/budibase/blob/HEAD/docs/CONTRIBUTING.md)

@@ -202,7 +203,7 @@ Budibase is open-source, licensed as [GPL v3](https://www.gnu.org/licenses/gpl-3 [![Stargazers over time](https://starchart.cc/Budibase/budibase.svg)](https://starchart.cc/Budibase/budibase) -If you are having issues between updates of the builder, please use the guide [here](https://github.com/Budibase/budibase/blob/HEAD/.github/CONTRIBUTING.md#troubleshooting) to clear down your environment. +If you are having issues between updates of the builder, please use the guide [here](https://github.com/Budibase/budibase/blob/HEAD/docs/CONTRIBUTING.md#troubleshooting) to clear down your environment.

diff --git a/charts/budibase/templates/worker-service-deployment.yaml b/charts/budibase/templates/worker-service-deployment.yaml index 73bb26dad9..a7f05f3137 100644 --- a/charts/budibase/templates/worker-service-deployment.yaml +++ b/charts/budibase/templates/worker-service-deployment.yaml @@ -123,6 +123,8 @@ spec: value: {{ .Values.globals.google.clientId | quote }} - name: GOOGLE_CLIENT_SECRET value: {{ .Values.globals.google.secret | quote }} + - name: TENANT_FEATURE_FLAGS + value: {{ .Values.globals.tenantFeatureFlags | quote }} image: budibase/worker:{{ .Values.globals.appVersion }} imagePullPolicy: Always livenessProbe: diff --git a/docs/CODE_OF_CONDUCT.md b/docs/CODE_OF_CONDUCT.md new file mode 100644 index 0000000000..1be855e3fa --- /dev/null +++ b/docs/CODE_OF_CONDUCT.md @@ -0,0 +1,76 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to making participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, sex characteristics, gender identity and expression, +level of experience, education, socio-economic status, nationality, personal +appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or + advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic + address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces +when an individual is representing the project or its community. Examples of +representing a project or community include using an official project e-mail +address, posting via an official social media account, or acting as an appointed +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at community@budibase.com. All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, +available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html + +[homepage]: https://www.contributor-covenant.org + +For answers to common questions about this code of conduct, see +https://www.contributor-covenant.org/faq diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md new file mode 100644 index 0000000000..961e13ee33 --- /dev/null +++ b/docs/CONTRIBUTING.md @@ -0,0 +1,216 @@ +# Contributing + +From opening a bug report to creating a pull request: every contribution is appreciated and welcome. If you're planning to implement a new feature or change the api please [create an issue](https://github.com/Budibase/budibase/issues/new/choose) first. This way we can ensure that your precious work is not in vain. + +## Table of contents + +- [Quick start](#quick-start) +- [Status](#status) +- [What's included](#whats-included) +- [Bugs and feature requests](#bugs-and-feature-requests) + + +## Not Sure Where to Start? + +Budibase is a low-code web application builder that creates svelte-based web applications. + +Budibase is a monorepo managed by [lerna](https://github.com/lerna/lerna). Lerna manages the building and publishing of the budibase packages. At a high level, here are the packages that make up budibase. + +- **packages/builder** - contains code for the budibase builder client side svelte application. + +- **packages/client** - A module that runs in the browser responsible for reading JSON definition and creating living, breathing web apps from it. + +- **packages/server** - The budibase server. This [Koa](https://koajs.com/) app is responsible for serving the JS for the builder and budibase apps, as well as providing the API for interaction with the database and file system. + +- **packages/worker** - This [Koa](https://koajs.com/) app is responsible for providing global apis for managing your budibase installation. Authentication, Users, Email, Org and Auth configs are all provided by the worker. + +## Contributor License Agreement (CLA) + +In order to accept your pull request, we need you to submit a CLA. You only need to do this once. If you are submitting a pull request for the first time, just submit a Pull Request and our CLA Bot will give you instructions on how to sign the CLA before merging your Pull Request. + +All contributors must sign an [Individual Contributor License Agreement](https://github.com/budibase/budibase/blob/next/.github/cla/individual-cla.md). + +If contributing on behalf of your company, your company must sign a [Corporate Contributor License Agreement](https://github.com/budibase/budibase/blob/next/.github/cla/corporate-cla.md). If so, please contact us via community@budibase.com. + +## Glossary of Terms + +To understand the budibase API, it can be helpful to understand the top level entities that make up Budibase. + +### Client + +A client represents a single budibase customer. Each budibase client will have 1 or more budibase servers. Every client is assigned a unique ID. + +### App + +A client can have one or more budibase applications. Budibase applications would be things like "Developer Inventory Management" or "Goat Herder CRM". Think of a budibase application as a tree. + +### Database + +An App can have one or more databases. Keeping with our [dendrology](https://en.wikipedia.org/wiki/Dendrology) analogy - think of an database as a branch on the tree. Databases are used to keep data separate for different instances of your app. For example, if you had a CRM app, you may create a database for your US office, and a database for your Australian office. Databases allow us to support [multitenancy](https://www.gartner.com/en/information-technology/glossary/multitenancy) in budibase applications. + +### Table + +Tables in budibase are almost akin to tables in relational databases. A table may be a "Car" or an "Employee". They are the main building blocks for the creation and management of backend data in budibase. + +### View + +A View is an advanced feature in budibase that allows you to write a custom query using [MapReduce](https://pouchdb.com/guides/queries.html) queries. Views enable powerful query functionality and calculations, allowing you to do more with your data. + +### Page + +A page in budibase is actually a single, self contained svelte web app. There are only 2 pages in budibase. The **login** page and the **main** page. + +### Screen + +A screen is a component within a single page. Generally, screens represent client side routes, and can be switched without refreshing the page. + +### Component + +A component is the basic frontend building block of a budibase app. + +### Component Library + +Component libraries are collections of components as well as the definition of their props contained in a file called `components.json`. + +## Contributing to Budibase + +* Please maintain the existing code style. + +* Please try to keep your commits small and focused. + +* Please write tests. + +* If the project diverges from your branch, please rebase instead of merging. This makes the commit graph easier to read. + +* Once your work is completed, please raise a PR against the `develop` branch with some information about what has changed and why. + +### Getting Started For Contributors +#### 1. Prerequisites + +NodeJS Version `14.x.x` + +*yarn -* `npm install -g yarn` + +*jest* - `npm install -g jest` + +#### 2. Clone this repository + +`git clone https://github.com/Budibase/budibase.git` + +then `cd ` into your local copy. + +#### 3. Install and Build + +| **NOTE**: On Windows, all yarn commands must be executed on a bash shell (e.g. git bash) + +To develop the Budibase platform you'll need [Docker](https://www.docker.com/) and [Docker Compose](https://docs.docker.com/compose/) installed. + +##### Quick method + +`yarn setup` will check that all necessary components are installed and setup the repo for usage. + +##### Manual method + +The following commands can be executed to manually get Budibase up and running (assuming Docker/Docker Compose has been installed). + +`yarn` to install project dependencies + +`yarn bootstrap` will install all budibase modules and symlink them together using lerna. + +`yarn build` will build all budibase packages. + +#### 4. Running + +To run the budibase server and builder in dev mode (i.e. with live reloading): + +1. Open a new console +2. `yarn dev` (from root) +3. Access the builder on http://localhost:10000/builder + +This will enable watch mode for both the builder app, server, client library and any component libraries. + +#### 5. Debugging using VS Code + +To debug the budibase server and worker a VS Code launch configuration has been provided. + +Visit the debug window and select `Budibase Server` or `Budibase Worker` to debug the respective component. +Alternatively to start both components simultaneously select `Start Budibase`. + +In addition to the above, the remaining budibase components may be run in dev mode using: `yarn dev:noserver`. + +#### 6. Cleanup + +If you wish to delete all the apps created in development and reset the environment then run the following: + +1. `yarn nuke:docker` will wipe all the Budibase services +2. `yarn dev` will restart all the services + +### Backend + +For the backend we run [Redis](https://redis.io/), [CouchDB](https://couchdb.apache.org/), [MinIO](https://min.io/) and [NGINX](https://www.nginx.com/) in Docker compose. This means that to develop Budibase you will need Docker and Docker compose installed. The backend services are then run separately as Node services with nodemon so that they can be debugged outside of Docker. + +### Data Storage + +When you are running locally, budibase stores data on disk using docker volumes. The volumes and the types of data associated with each are: + +- `redis_data` + - Sessions, email tokens +- `couchdb3_data` + - Global and app databases +- `minio_data` + - App manifest, budibase client, static assets + +### Development Modes + +A combination of environment variables controls the mode budibase runs in. +Yarn commands can be used to mimic the different modes as described in the sections below: + +#### Self Hosted +The default mode. A single tenant installation with no usage restrictions. + +To enable this mode, use: +``` +yarn mode:self +``` + +#### Cloud +The cloud mode, with account portal turned off. + +To enable this mode, use: +``` +yarn mode:cloud +``` +#### Cloud & Account +The cloud mode, with account portal turned on. This is a replica of the mode that runs at https://budibase.app + + +To enable this mode, use: +``` +yarn mode:account +``` +### CI + An overview of the CI pipelines can be found [here](./workflows/README.md) +### Troubleshooting + +Sometimes, things go wrong. This can be due to incompatible updates on the budibase platform. To clear down your development environment and start again follow **Step 6. Cleanup**, then proceed from **Step 3. Install and Build** in the setup guide above to create a fresh Budibase installation. +### Running tests + +#### End-to-end Tests + +Budibase uses Cypress to run a number of E2E tests. To run the tests execute the following command in the root folder: + +``` +yarn test:e2e +``` + +Or if you are in the builder you can run `yarn cy:test`. + + +### Other Useful Information + +* The contributors are listed in [AUTHORS.md](https://github.com/Budibase/budibase/blob/master/.github/AUTHORS.md) (add yourself). + +* This project uses a modified version of the MPLv2 license, see [LICENSE](https://github.com/budibase/server/blob/master/LICENSE). + +* We use the [C4 (Collective Code Construction Contract)](https://rfc.zeromq.org/spec:42/C4/) process for contributions. + Please read this if you are unfamiliar with it. diff --git a/docs/DEV-SETUP-DEBIAN.md b/docs/DEV-SETUP-DEBIAN.md new file mode 100644 index 0000000000..88a124708c --- /dev/null +++ b/docs/DEV-SETUP-DEBIAN.md @@ -0,0 +1,52 @@ +## Dev Environment on Debian 11 + +### Install Node + +Budibase requires a recent version of node (14+): +``` +curl -sL https://deb.nodesource.com/setup_16.x | sudo bash - +apt -y install nodejs +node -v +``` + +### Install npm requirements + +``` +npm install -g yarn jest lerna +``` +### Install Docker and Docker Compose + +``` +apt install docker.io +pip3 install docker-compose +``` +### Clone the repo +``` +git clone https://github.com/Budibase/budibase.git +``` + +### Check Versions + +This setup process was tested on Debian 11 (bullseye) with version numbers show below. Your mileage may vary using anything else. + +- Docker: 20.10.5 +- Docker-Compose: 1.29.2 +- Node: v16.15.1 +- Yarn: 1.22.19 +- Lerna: 5.1.4 + +### Build + +``` +cd budibase +yarn setup +``` +The yarn setup command runs several build steps i.e. +``` +node ./hosting/scripts/setup.js && yarn && yarn bootstrap && yarn build && yarn dev +``` +So this command will actually run the application in dev mode. It creates .env files under `./packages/server` and `./packages/worker` and runs docker containers for each service via docker-compose. + +The dev version will be available on port 10000 i.e. + +http://127.0.0.1:10000/builder/admin \ No newline at end of file diff --git a/docs/DEV-SETUP-MACOSX.md b/docs/DEV-SETUP-MACOSX.md new file mode 100644 index 0000000000..5606fd0d10 --- /dev/null +++ b/docs/DEV-SETUP-MACOSX.md @@ -0,0 +1,54 @@ +## Dev Environment on MAC OSX 12 (Monterey) + +### Install Homebrew + +Install instructions [here](https://brew.sh/) + +### Install Node + +Budibase requires a recent version of node (14+): +``` +brew install node npm +node -v +``` + +### Install npm requirements + +``` +npm install -g yarn jest lerna +``` +### Install Docker and Docker Compose + +``` +brew install docker docker-compose +``` +### Clone the repo +``` +git clone https://github.com/Budibase/budibase.git +``` + +### Check Versions + +This setup process was tested on Mac OSX 12 (Monterey) with version numbers shown below. Your mileage may vary using anything else. + +- Docker: 20.10.14 +- Docker-Compose: 2.6.0 +- Node: 18.3.0 +- Yarn: 1.22.19 +- Lerna: 5.1.4 + +### Build + +``` +cd budibase +yarn setup +``` +The yarn setup command runs several build steps i.e. +``` +node ./hosting/scripts/setup.js && yarn && yarn bootstrap && yarn build && yarn dev +``` +So this command will actually run the application in dev mode. It creates .env files under `./packages/server` and `./packages/worker` and runs docker containers for each service via docker-compose. + +The dev version will be available on port 10000 i.e. + +http://127.0.0.1:10000/builder/admin \ No newline at end of file diff --git a/hosting/single/Dockerfile b/hosting/single/Dockerfile index 79d84f70c6..f0df9373c5 100644 --- a/hosting/single/Dockerfile +++ b/hosting/single/Dockerfile @@ -1,79 +1,84 @@ -FROM couchdb +FROM node:14-slim as build -ENV DEPLOYMENT_ENVIRONMENT=docker -ENV POSTHOG_TOKEN=phc_fg5I3nDOf6oJVMHSaycEhpPdlgS8rzXG2r6F2IpxCHS -ENV COUCHDB_PASSWORD=budibase -ENV COUCHDB_USER=budibase -ENV COUCH_DB_URL=http://budibase:budibase@localhost:5984 -ENV BUDIBASE_ENVIRONMENT=PRODUCTION -ENV MINIO_URL=http://localhost:9000 -ENV REDIS_URL=localhost:6379 -ENV WORKER_URL=http://localhost:4002 -ENV INTERNAL_API_KEY=budibase -ENV JWT_SECRET=testsecret -ENV MINIO_ACCESS_KEY=budibase -ENV MINIO_SECRET_KEY=budibase -ENV SELF_HOSTED=1 -ENV CLUSTER_PORT=10000 -ENV REDIS_PASSWORD=budibase -ENV ARCHITECTURE=amd -ENV APP_PORT=4001 -ENV WORKER_PORT=4002 +# install node-gyp dependencies +RUN apt-get update && apt-get install -y --no-install-recommends g++ make python -RUN apt-get update -RUN apt-get install software-properties-common wget nginx -y -RUN apt-add-repository 'deb http://security.debian.org/debian-security stretch/updates main' -RUN apt-get update +# add pin script +WORKDIR / +ADD scripts/pinVersions.js scripts/cleanup.sh ./ +RUN chmod +x /cleanup.sh + +# build server +WORKDIR /app +ADD packages/server . +RUN node /pinVersions.js && yarn && yarn build && /cleanup.sh + +# build worker +WORKDIR /worker +ADD packages/worker . +RUN node /pinVersions.js && yarn && yarn build && /cleanup.sh + +FROM couchdb:3.2.1 + +COPY --from=build /app /app +COPY --from=build /worker /worker + +ENV DEPLOYMENT_ENVIRONMENT=docker \ + POSTHOG_TOKEN=phc_fg5I3nDOf6oJVMHSaycEhpPdlgS8rzXG2r6F2IpxCHS \ + COUCHDB_PASSWORD=budibase \ + COUCHDB_USER=budibase \ + COUCH_DB_URL=http://budibase:budibase@localhost:5984 \ + BUDIBASE_ENVIRONMENT=PRODUCTION \ + MINIO_URL=http://localhost:9000 \ + REDIS_URL=localhost:6379 \ + WORKER_URL=http://localhost:4002 \ + INTERNAL_API_KEY=budibase \ + JWT_SECRET=testsecret \ + MINIO_ACCESS_KEY=budibase \ + MINIO_SECRET_KEY=budibase \ + SELF_HOSTED=1 \ + CLUSTER_PORT=10000 \ + REDIS_PASSWORD=budibase \ + ARCHITECTURE=amd \ + APP_PORT=4001 \ + WORKER_PORT=4002 + +# install base dependencies +RUN apt-get update && \ + apt-get install software-properties-common wget -y && \ + apt-add-repository 'deb http://security.debian.org/debian-security stretch/updates main' && \ + apt-get update + +# install other dependencies, nodejs, oracle requirements, jdk8, redis, nginx +WORKDIR /nodejs +RUN curl -sL https://deb.nodesource.com/setup_16.x -o /tmp/nodesource_setup.sh && \ + bash /tmp/nodesource_setup.sh && \ + apt-get install libaio1 nodejs nginx openjdk-8-jdk redis-server unzip -y && \ + npm install --global yarn pm2 # setup nginx ADD hosting/single/nginx.conf /etc/nginx -RUN mkdir /etc/nginx/logs -RUN useradd www -RUN touch /etc/nginx/logs/error.log -RUN touch /etc/nginx/logs/nginx.pid +RUN mkdir /etc/nginx/logs && \ + useradd www && \ + touch /etc/nginx/logs/error.log && \ + touch /etc/nginx/logs/nginx.pid -# install java -RUN apt-get install openjdk-8-jdk -y - -# setup nodejs -WORKDIR /nodejs -RUN curl -sL https://deb.nodesource.com/setup_16.x -o /tmp/nodesource_setup.sh -RUN bash /tmp/nodesource_setup.sh -RUN apt-get install nodejs -RUN npm install --global yarn -RUN npm install --global pm2 - -# setup redis -RUN apt install redis-server -y - -# setup server -WORKDIR /app -ADD packages/server . -RUN ls -al -RUN yarn -RUN yarn build -# Install client for oracle datasource -RUN apt-get install unzip libaio1 -RUN /bin/bash -e scripts/integrations/oracle/instantclient/linux/x86-64/install.sh - -# setup worker -WORKDIR /worker -ADD packages/worker . -RUN yarn -RUN yarn build +WORKDIR / +RUN mkdir -p scripts/integrations/oracle +ADD packages/server/scripts/integrations/oracle scripts/integrations/oracle +RUN /bin/bash -e ./scripts/integrations/oracle/instantclient/linux/x86-64/install.sh # setup clouseau WORKDIR / -RUN wget https://github.com/cloudant-labs/clouseau/releases/download/2.21.0/clouseau-2.21.0-dist.zip -RUN unzip clouseau-2.21.0-dist.zip -RUN mv clouseau-2.21.0 /opt/clouseau -RUN rm clouseau-2.21.0-dist.zip +RUN wget https://github.com/cloudant-labs/clouseau/releases/download/2.21.0/clouseau-2.21.0-dist.zip && \ + unzip clouseau-2.21.0-dist.zip && \ + mv clouseau-2.21.0 /opt/clouseau && \ + rm clouseau-2.21.0-dist.zip WORKDIR /opt/clouseau RUN mkdir ./bin ADD hosting/single/clouseau ./bin/ -ADD hosting/single/log4j.properties . -ADD hosting/single/clouseau.ini . +ADD hosting/single/log4j.properties hosting/single/clouseau.ini ./ RUN chmod +x ./bin/clouseau # setup CouchDB @@ -82,18 +87,22 @@ ADD hosting/single/vm.args ./etc/ # setup minio WORKDIR /minio -RUN wget https://dl.min.io/server/minio/release/linux-${ARCHITECTURE}64/minio -RUN chmod +x minio +RUN wget https://dl.min.io/server/minio/release/linux-${ARCHITECTURE}64/minio && chmod +x minio # setup runner file WORKDIR / ADD hosting/single/runner.sh . RUN chmod +x ./runner.sh +# cleanup cache +RUN yarn cache clean -f + EXPOSE 10000 VOLUME /opt/couchdb/data VOLUME /minio # must set this just before running ENV NODE_ENV=production +WORKDIR / + CMD ["./runner.sh"] diff --git a/hosting/single/test.sh b/hosting/single/test.sh new file mode 100755 index 0000000000..b9f9a4032c --- /dev/null +++ b/hosting/single/test.sh @@ -0,0 +1,4 @@ +#!/bin/bash +id=$(docker run -t -d -p 10000:10000 budibase:latest) +docker exec -it $id bash +docker kill $id diff --git a/lerna.json b/lerna.json index 080372bc14..63c60b8698 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "1.0.206", + "version": "1.0.207-alpha.4", "npmClient": "yarn", "packages": [ "packages/*" diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json index 04d50eff1a..68c7ad03cb 100644 --- a/packages/backend-core/package.json +++ b/packages/backend-core/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/backend-core", - "version": "1.0.206", + "version": "1.0.207-alpha.4", "description": "Budibase backend core libraries used in server and worker", "main": "dist/src/index.js", "types": "dist/src/index.d.ts", @@ -20,6 +20,7 @@ "test:watch": "jest --watchAll" }, "dependencies": { + "@budibase/types": "^1.0.207-alpha.4", "@techpass/passport-openidconnect": "0.3.2", "aws-sdk": "2.1030.0", "bcrypt": "5.0.1", @@ -57,7 +58,6 @@ ] }, "devDependencies": { - "@budibase/types": "^1.0.206", "@shopify/jest-koa-mocks": "3.1.5", "@types/jest": "27.5.1", "@types/koa": "2.0.52", diff --git a/packages/bbui/package.json b/packages/bbui/package.json index 61710954d8..71730d6000 100644 --- a/packages/bbui/package.json +++ b/packages/bbui/package.json @@ -1,7 +1,7 @@ { "name": "@budibase/bbui", "description": "A UI solution used in the different Budibase projects.", - "version": "1.0.206", + "version": "1.0.207-alpha.4", "license": "MPL-2.0", "svelte": "src/index.js", "module": "dist/bbui.es.js", @@ -38,7 +38,7 @@ ], "dependencies": { "@adobe/spectrum-css-workflow-icons": "^1.2.1", - "@budibase/string-templates": "^1.0.206", + "@budibase/string-templates": "^1.0.207-alpha.4", "@spectrum-css/actionbutton": "^1.0.1", "@spectrum-css/actiongroup": "^1.0.1", "@spectrum-css/avatar": "^3.0.2", diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte index e8f6b4500e..36abcbf4da 100644 --- a/packages/bbui/src/Button/Button.svelte +++ b/packages/bbui/src/Button/Button.svelte @@ -14,6 +14,7 @@ export let active = false export let tooltip = undefined export let dataCy + export let newStyles = false let showTooltip = false @@ -25,6 +26,7 @@ class:spectrum-Button--warning={warning} class:spectrum-Button--overBackground={overBackground} class:spectrum-Button--quiet={quiet} + class:new-styles={newStyles} class:active class="spectrum-Button spectrum-Button--size{size.toUpperCase()}" {disabled} @@ -93,4 +95,20 @@ padding-left: var(--spacing-m); line-height: 0; } + .spectrum-Button--primary.new-styles { + background: var(--spectrum-global-color-gray-800); + border-color: transparent; + color: var(--spectrum-global-color-gray-50); + } + .spectrum-Button--primary.new-styles:hover { + background: var(--spectrum-global-color-gray-900); + } + .spectrum-Button--secondary.new-styles { + background: var(--spectrum-global-color-gray-200); + border-color: transparent; + color: var(--spectrum-global-color-gray-900); + } + .spectrum-Button--secondary.new-styles:hover { + background: var(--spectrum-global-color-gray-300); + } diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte index 6a64876a2c..0a723c140a 100644 --- a/packages/bbui/src/Form/Core/TextField.svelte +++ b/packages/bbui/src/Form/Core/TextField.svelte @@ -112,4 +112,8 @@ .spectrum-Textfield { width: 100%; } + input:disabled { + color: var(--spectrum-global-color-gray-600) !important; + -webkit-text-fill-color: var(--spectrum-global-color-gray-600) !important; + } diff --git a/packages/builder/cypress/integration/appOverview.spec.js b/packages/builder/cypress/integration/appOverview.spec.js index 6a5ec10076..b25a53a916 100644 --- a/packages/builder/cypress/integration/appOverview.spec.js +++ b/packages/builder/cypress/integration/appOverview.spec.js @@ -1,7 +1,7 @@ import filterTests from "../support/filterTests" import clientPackage from "@budibase/client/package.json" -filterTests(['all'], () => { +filterTests(["all"], () => { context("Application Overview screen", () => { before(() => { cy.login() @@ -10,31 +10,19 @@ filterTests(['all'], () => { it("Should be accessible from the applications list", () => { cy.visit(`${Cypress.config().baseUrl}/builder`) - - cy.get(".appTable .title").eq(0) - .invoke('attr', 'data-cy') - .then(($dataCy) => { - const dataCy = $dataCy; - cy.get(".appTable .name").eq(0).click() + cy.get(".appTable .title") + .eq(0) + .invoke("attr", "data-cy") + .then($dataCy => { + const dataCy = $dataCy + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .click({ force: true }) - cy.location().should((loc) => { - expect(loc.pathname).to.eq('/builder/portal/overview/' + dataCy) + cy.location().should(loc => { + expect(loc.pathname).to.eq("/builder/portal/overview/" + dataCy) + }) }) - }) - - cy.visit(`${Cypress.config().baseUrl}/builder`) - - cy.get(".appTable .title").eq(0) - .invoke('attr', 'data-cy') - .then(($dataCy) => { - const dataCy = $dataCy; - cy.get(".appTable .app-row-actions button").contains("View").click({force: true}) - - cy.location().should((loc) => { - expect(loc.pathname).to.eq('/builder/portal/overview/' + dataCy) - }) - }) - }) // Find a more suitable place for this. @@ -43,24 +31,28 @@ filterTests(['all'], () => { cy.get(".appTable .lock-status").eq(0).contains("Locked by you").click() - cy.unlockApp({ owned : true }) + cy.unlockApp({ owned: true }) cy.get(".appTable").should("exist") - cy.get(".lock-status").should('not.be.visible') + cy.get(".lock-status").should("not.be.visible") }) - + it("Should allow unlocking in the app overview screen", () => { cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .app-row-actions button").contains("Edit").eq(0).click({force: true}) + cy.get(".appTable .app-row-actions button") + .contains("Edit") + .eq(0) + .click({ force: true }) cy.wait(1000) cy.visit(`${Cypress.config().baseUrl}/builder`) - - cy.get(".appTable .name").eq(0).click() - + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) cy.get(".lock-status").eq(0).contains("Locked by you").click() - cy.unlockApp({ owned : true }) + cy.unlockApp({ owned: true }) cy.get(".lock-status").should("not.be.visible") }) @@ -68,107 +60,149 @@ filterTests(['all'], () => { it("Should reflect the deploy state of an app that hasn't been published.", () => { cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .name").eq(0).click() - - cy.get(".header-right button.spectrum-Button[data-cy='view-app']").should("be.disabled") + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) + cy.get(".header-right button.spectrum-Button[data-cy='view-app']").should( + "be.disabled" + ) cy.get(".spectrum-Tabs-item.is-selected").contains("Overview") cy.get(".overview-tab").should("be.visible") cy.get(".overview-tab [data-cy='app-status']").within(() => { cy.get(".status-display").contains("Unpublished") - cy.get(".status-display .icon svg[aria-label='GlobeStrike']").should("exist") + cy.get(".status-display .icon svg[aria-label='GlobeStrike']").should( + "exist" + ) cy.get(".status-text").contains("-") }) }) it("Should reflect the app deployment state", () => { cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .app-row-actions button").contains("Edit").eq(0).click({force: true}) - - cy.get(".toprightnav button.spectrum-Button").contains("Publish").click({ force : true }) - cy.get(".spectrum-Modal [data-cy='deploy-app-modal']").should("be.visible") - .within(() => { - cy.get(".spectrum-Button").contains("Publish").click({ force : true }) - cy.wait(1000) - }); + cy.get(".appTable .app-row-actions button") + .contains("Edit") + .eq(0) + .click({ force: true }) + + cy.get(".toprightnav button.spectrum-Button") + .contains("Publish") + .click({ force: true }) + cy.get(".spectrum-Modal [data-cy='deploy-app-modal']") + .should("be.visible") + .within(() => { + cy.get(".spectrum-Button").contains("Publish").click({ force: true }) + cy.wait(1000) + }) cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .name").eq(0).click() - - cy.get(".header-right button.spectrum-Button[data-cy='view-app']").should("not.be.disabled") + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) + cy.get(".header-right button.spectrum-Button[data-cy='view-app']").should( + "not.be.disabled" + ) cy.get(".overview-tab [data-cy='app-status']").within(() => { cy.get(".status-display").contains("Published") - cy.get(".status-display .icon svg[aria-label='GlobeCheck']").should("exist") + cy.get(".status-display .icon svg[aria-label='GlobeCheck']").should( + "exist" + ) cy.get(".status-text").contains("Last published a few seconds ago") }) }) - it("Should reflect an application that has been unpublished", () => { + it("Should reflect an application that has been unpublished", () => { cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .app-row-actions button").contains("Edit").eq(0).click({force: true}) + cy.get(".appTable .app-row-actions button") + .contains("Edit") + .eq(0) + .click({ force: true }) - cy.get(".deployment-top-nav svg[aria-label='Globe']") - .click({ force: true }) + cy.get(".deployment-top-nav svg[aria-label='Globe']").click({ + force: true, + }) cy.get("[data-cy='publish-popover-menu']").should("be.visible") - cy.get("[data-cy='publish-popover-menu'] [data-cy='publish-popover-action']") - .click({ force : true }) - - cy.get("[data-cy='unpublish-modal']").should("be.visible") - .within(() => { - cy.get(".confirm-wrap button").click({ force: true } - )}) + cy.get( + "[data-cy='publish-popover-menu'] [data-cy='publish-popover-action']" + ).click({ force: true }) + + cy.get("[data-cy='unpublish-modal']") + .should("be.visible") + .within(() => { + cy.get(".confirm-wrap button").click({ force: true }) + }) cy.wait(1000) cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .name").eq(0).click() - + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) cy.get(".overview-tab [data-cy='app-status']").within(() => { cy.get(".status-display").contains("Unpublished") - cy.get(".status-display .icon svg[aria-label='GlobeStrike']").should("exist") + cy.get(".status-display .icon svg[aria-label='GlobeStrike']").should( + "exist" + ) cy.get(".status-text").contains("Last published a few seconds ago") }) }) - it("Should allow the editing of the application icon and colour", () => { + it("Should allow the editing of the application icon and colour", () => { cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable", { timeout: 2000}) - .within(() => { - cy.get(".app-row-actions-icon").eq(0).click() - }) + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) + cy.wait(1000) + cy.get(".app-overview-actions-icon").within(() => { + cy.get(".spectrum-Icon").click({ force: true }) + }) 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() + 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.get(".color") + .eq(Math.floor(Math.random() * 33) + 1) + .click() }) - cy.intercept('**/applications/**').as('iconChange') + 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.get("@iconChange").its("response.statusCode").should("eq", 200) // Confirm icon has changed from default // Confirm colour has been applied - cy.get(".appTable", { timeout: 2000}) - .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') - }) + cy.get(".appTable", { timeout: 2000 }).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") + }) }) it("Should reflect the last time the application was edited", () => { cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .name").eq(0).click() - - cy.get(".header-right button").contains("Edit").click({ force: true }); + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) + cy.get(".header-right button").contains("Edit").click({ force: true }) cy.navigateToFrontend() @@ -177,41 +211,51 @@ filterTests(['all'], () => { }) cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .name").eq(0).click() - + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) cy.get(".overview-tab [data-cy='edited-by']").within(() => { cy.get(".editor-name").contains("You") cy.get(".last-edit-text").contains("Last edited a few seconds ago") }) - }); + }) it("Should reflect application version is up-to-date", () => { cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .name").eq(0).click() - + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) cy.get(".overview-tab [data-cy='app-version']").within(() => { cy.get(".version-status").contains("You're running the latest!") }) - }); + }) it("Should navigate to the settings tab when clicking the App Version card header", () => { cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .name").eq(0).click() - + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) cy.get(".spectrum-Tabs-item.is-selected").contains("Overview") cy.get(".overview-tab").should("be.visible") - cy.get(".overview-tab [data-cy='app-version'] .dash-card-header").click({ force : true }) + cy.get(".overview-tab [data-cy='app-version'] .dash-card-header").click({ + force: true, + }) cy.get(".spectrum-Tabs-item.is-selected").contains("Settings") cy.get(".settings-tab").should("be.visible") cy.get(".overview-tab").should("not.exist") - - }); + }) it("Should allow the upgrading of an application, if available.", () => { cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .name").eq(0).click() + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) cy.wait(500) cy.location().then(loc => { @@ -219,118 +263,168 @@ filterTests(['all'], () => { const appId = params[params.length - 1] cy.log(appId) //Downgrade the app for the test - cy.alterAppVersion(appId, "0.0.1-alpha.0") - .then(()=>{ + cy.alterAppVersion(appId, "0.0.1-alpha.0").then(() => { cy.reload() cy.log("Current deployment version: " + clientPackage.version) cy.get(".version-status a", { timeout: 1000 }).contains("Update").click() cy.get(".spectrum-Tabs-item.is-selected").contains("Settings") - cy.get(".version-section .page-action button").contains("Update").click({ force: true }) - - cy.intercept('POST', '**/applications/**/client/update').as('updateVersion') - cy.get(".spectrum-Modal.is-open button").contains("Update").click({ force: true }) + cy.get(".version-section .page-action button") + .contains("Update") + .click({ force: true }) + + cy.intercept("POST", "**/applications/**/client/update").as( + "updateVersion" + ) + cy.get(".spectrum-Modal.is-open button") + .contains("Update") + .click({ force: true }) cy.wait("@updateVersion") - .its('response.statusCode').should('eq', 200) - .then(() => { - cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .name").eq(0).click() - - cy.get(".spectrum-Tabs-item").contains("Overview").click({ force: true }) - cy.get(".overview-tab [data-cy='app-version']").within(() => { - cy.get(".spectrum-Heading").contains(clientPackage.version) - cy.get(".version-status").contains("You're running the latest!") + .its("response.statusCode") + .should("eq", 200) + .then(() => { + cy.visit(`${Cypress.config().baseUrl}/builder`) + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) + cy.get(".spectrum-Tabs-item") + .contains("Overview") + .click({ force: true }) + cy.get(".overview-tab [data-cy='app-version']").within(() => { + cy.get(".spectrum-Heading").contains(clientPackage.version) + cy.get(".version-status").contains("You're running the latest!") + }) }) - }) }) - }); - + }) }) it("Should allow editing of the app details.", () => { cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .name").eq(0).click() - + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) cy.get(".spectrum-Tabs-item").contains("Settings").click() cy.get(".spectrum-Tabs-item.is-selected").contains("Settings") cy.get(".settings-tab").should("be.visible") - cy.get(".details-section .page-action button").contains("Edit").click({ force: true }) + cy.get(".details-section .page-action button") + .contains("Edit") + .click({ force: true }) cy.updateAppName("sample name") //publish and check its disabled cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .app-row-actions button").contains("Edit").eq(0).click({force: true}) + cy.get(".appTable .app-row-actions button") + .contains("Edit") + .eq(0) + .click({ force: true }) - cy.get(".toprightnav button.spectrum-Button").contains("Publish").click({ force : true }) - cy.get(".spectrum-Modal [data-cy='deploy-app-modal']").should("be.visible") - .within(() => { - cy.get(".spectrum-Button").contains("Publish").click({ force : true }) - cy.wait(1000) - }); + cy.get(".toprightnav button.spectrum-Button") + .contains("Publish") + .click({ force: true }) + cy.get(".spectrum-Modal [data-cy='deploy-app-modal']") + .should("be.visible") + .within(() => { + cy.get(".spectrum-Button").contains("Publish").click({ force: true }) + cy.wait(1000) + }) cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .name", { timeout: 1000 }).eq(0).click() + cy.get(".appTable .app-row-actions button", { timeout: 1000 }) + .contains("Manage") + .eq(0) + .click({ force: true }) cy.get(".spectrum-Tabs-item").contains("Settings").click() cy.get(".spectrum-Tabs-item.is-selected").contains("Settings") cy.get(".details-section .page-action .spectrum-Button").scrollIntoView() - cy.get(".details-section .page-action .spectrum-Button", { timeout: 1000 }).should("be.disabled") - + cy.get(".details-section .page-action .spectrum-Button", { timeout: 1000 }).should( + "be.disabled" + ) }) xit("Should allow copying of the published application Id", () => { cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .app-row-actions").eq(0) - .within(() => { - cy.get(".spectrum-Button").contains("Edit").click({ force: true }) - }) + cy.get(".appTable .app-row-actions") + .eq(0) + .within(() => { + cy.get(".spectrum-Button").contains("Edit").click({ force: true }) + }) cy.publishApp("sample-name") cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .name").eq(0).click() + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) + cy.get(".app-overview-actions-icon > .icon").click({ force: true }) - cy.get(".app-overview-actions-icon > .icon").click({ force : true }) + cy.get("[data-cy='app-overview-menu-popover']") + .eq(0) + .within(() => { + cy.get(".spectrum-Menu-item") + .contains("Copy App ID") + .click({ force: true }) + }) - cy.get("[data-cy='app-overview-menu-popover']").eq(0).within(() => { - cy.get(".spectrum-Menu-item").contains("Copy App ID").click({ force: true }) - }) - - cy.get(".spectrum-Toast-content").contains("App ID copied to clipboard.").should("be.visible") + cy.get(".spectrum-Toast-content") + .contains("App ID copied to clipboard.") + .should("be.visible") }) it("Should allow unpublishing of the application", () => { cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .name").eq(0).click() + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) + cy.get(".app-overview-actions-icon > .icon").click({ force: true }) - cy.get(".overview-tab [data-cy='app-status']").within(() => { - cy.get(".spectrum-Link").contains("Unpublish").click() - }) + cy.get("[data-cy='app-overview-menu-popover']") + .eq(0) + .within(() => { + cy.get(".spectrum-Menu-item") + .contains("Unpublish") + .click({ force: true }) + cy.wait(500) + }) - cy.get("[data-cy='unpublish-modal']").should("be.visible") - .within(() => { - cy.get(".confirm-wrap button").click({ force: true } - )}) + cy.get("[data-cy='unpublish-modal']") + .should("be.visible") + .within(() => { + cy.get(".confirm-wrap button").click({ force: true }) + }) cy.get(".overview-tab [data-cy='app-status']").within(() => { cy.get(".status-display").contains("Unpublished") - cy.get(".status-display .icon svg[aria-label='GlobeStrike']").should("exist") + cy.get(".status-display .icon svg[aria-label='GlobeStrike']").should( + "exist" + ) }) }) it("Should allow deleting of the application", () => { cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .name").eq(0).click() + cy.get(".appTable .app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) + cy.get(".app-overview-actions-icon > .icon").click({ force: true }) - cy.get(".app-overview-actions-icon > .icon").click({ force : true }) - - cy.get("[data-cy='app-overview-menu-popover']").eq(0).within(() => { - cy.get(".spectrum-Menu-item").contains("Delete").click({ force: true }) - cy.wait(500) - }) + cy.get("[data-cy='app-overview-menu-popover']") + .eq(0) + .within(() => { + cy.get(".spectrum-Menu-item") + .contains("Delete") + .click({ force: true }) + cy.wait(500) + }) //The test application was renamed earlier in the spec cy.get(".spectrum-Dialog-grid").within(() => { @@ -338,18 +432,17 @@ filterTests(['all'], () => { cy.get(".spectrum-Button--warning").click() }) - cy.location().should((loc) => { - expect(loc.pathname).to.eq('/builder/portal/apps') + cy.location().should(loc => { + expect(loc.pathname).to.eq("/builder/portal/apps") }) cy.get(".appTable").should("not.exist") - + cy.get(".welcome .container h1").contains("Let's create your first app!") }) after(() => { cy.deleteAllApps() }) - }) }) diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js index 47063fb026..eff7fc216f 100644 --- a/packages/builder/cypress/integration/createComponents.spec.js +++ b/packages/builder/cypress/integration/createComponents.spec.js @@ -1,7 +1,7 @@ import filterTests from "../support/filterTests" -const interact = require('../support/interact') +const interact = require("../support/interact") -filterTests(['all'], () => { +filterTests(["all"], () => { context("Create Components", () => { let headlineId @@ -19,17 +19,15 @@ filterTests(['all'], () => { //Use the tree to delete a selected component const deleteSelectedComponent = () => { - cy.get(".nav-items-container .nav-item.selected .actions > div > .icon").click({ + cy.get( + ".nav-items-container .nav-item.selected .actions > div > .icon" + ).click({ + force: true, + }) + cy.get(".spectrum-Popover.is-open li").contains("Delete").click() + cy.get(".spectrum-Modal button").contains("Delete Component").click({ force: true, }) - cy.get(".spectrum-Popover.is-open li") - .contains("Delete") - .click() - cy.get(".spectrum-Modal button") - .contains("Delete Component") - .click({ - force: true, - }) } it("should add a container", () => { @@ -47,18 +45,18 @@ filterTests(['all'], () => { it("should change the text of the headline", () => { const text = "Lorem ipsum dolor sit amet." - cy.get("[data-cy=setting-text] input") - .type(text) - .blur() + 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=setting-size]").scrollIntoView().click() cy.get("[data-cy=setting-size]").within(() => { - cy.get(".spectrum-Form-item li.spectrum-Menu-item").contains("3XL").click() + cy.get(".spectrum-Form-item li.spectrum-Menu-item") + .contains("3XL") + .click() }) - + cy.getComponent(headlineId).within(() => { cy.get(".spectrum-Heading").should("have.css", "font-size", "60px") }) @@ -66,13 +64,9 @@ filterTests(['all'], () => { it("should create a form and reset to match schema", () => { cy.addComponent("Form", "Form").then(() => { - cy.get("[data-cy=setting-dataSource]") - .contains("Custom") - .click() - cy.get(interact.DROPDOWN) - .contains("dog") - .click() - cy.wait(500) + cy.get("[data-cy=setting-dataSource]").contains("Custom").click() + cy.get(interact.DROPDOWN).contains("dog").click() + cy.wait(500) cy.addComponent("Form", "Field Group").then(fieldGroupId => { cy.contains("Update form fields").click() cy.get(".spectrum-Modal") @@ -83,11 +77,9 @@ filterTests(['all'], () => { cy.contains("name").should("exist") cy.contains("age").should("exist") cy.contains("breed").should("exist") - // cy.contains("image").should("exist") + // cy.contains("image").should("exist") }) - cy.getComponent(fieldGroupId) - .find("input") - .should("have.length", 2) + cy.getComponent(fieldGroupId).find("input").should("have.length", 2) cy.getComponent(fieldGroupId) .find(interact.SPECTRUM_PICKER) .should("have.length", 1) @@ -97,191 +89,102 @@ filterTests(['all'], () => { it("deletes a component", () => { cy.addComponent("Elements", "Paragraph").then(componentId => { - cy.get("[data-cy=setting-_instanceName] input") - .type(componentId) - .blur() - cy.get(".nav-items-container .nav-item.selected .actions > div > .icon").click({ + cy.get("[data-cy=setting-_instanceName] input").type(componentId).blur() + cy.get( + ".nav-items-container .nav-item.selected .actions > div > .icon" + ).click({ + force: true, + }) + cy.get(".spectrum-Popover.is-open li").contains("Delete").click() + cy.get(".spectrum-Modal button").contains("Delete Component").click({ force: true, }) - cy.get(".spectrum-Popover.is-open li") - .contains("Delete") - .click() - cy.get(".spectrum-Modal button") - .contains("Delete Component") - .click({ - force: true, - }) cy.getComponent(componentId).should("not.exist") }) }) - it("should set focus to the field setting when fields are added to a form", () => { - cy.addComponent("Form", "Form").then((formId) => { - - //For deletion - cy.get("[data-cy=setting-_instanceName] input") - .clear() - .type(formId) - .blur() - - const componentTypeLabels = ["Text Field", "Number Field", "Password Field", - "Options Picker", "Checkbox", "Long Form Field", "Date Picker", "Attachment", - "JSON Field", "Multi-select Picker", "Relationship Picker"] - - const refocusTest = (componentId) => { - cy.getComponent(componentId) - .find(".showMe").should("exist").click({ force: true }) - - cy.get("[data-cy=setting-field] .spectrum-InputGroup") - .should("have.class", "is-focused") - } - - const testFieldFocusOnCreate = (componentLabel) => { - cy.log("Adding: " + componentLabel) - return cy.addComponent("Form", componentLabel).then((componentId) => { - - refocusTest(componentId) - - cy.get("[data-cy=setting-field] .spectrum-InputGroup") - .should("have.class", "is-focused") - }) - } - - cy.wait(1000) - cy.wrap(componentTypeLabels).each((label) => { - return testFieldFocusOnCreate(label) - }).then(()=>{ - cy.get(".nav-items-container .nav-item").contains(formId).click({ force: true }) - deleteSelectedComponent() - }) - }) - }) - it("should clear the iframe place holder when a form field has been set", () => { - cy.addComponent("Form", "Form").then((formId) => { - + cy.addComponent("Form", "Form").then(formId => { //For deletion cy.get("[data-cy=setting-_instanceName] input") .clear() .type(formId) .blur() - - cy.get("[data-cy=setting-dataSource]") - .contains("Custom") - .click() - cy.get(".dropdown") - .contains("dog") - .click() + cy.get("[data-cy=setting-dataSource]").contains("Custom").click() + cy.get(".dropdown").contains("dog").click() const fieldTypeToColumnName = { - "Text Field" : "name", - "Number Field": "age", - "Options Picker": "breed" + "Text Field": "name", + "Number Field": "age", + "Options Picker": "breed", } const componentTypeLabels = Object.keys(fieldTypeToColumnName) - const testFieldFocusOnCreate = (componentLabel) => { + const testFieldFocusOnCreate = componentLabel => { cy.log("Adding: " + componentLabel) - return cy.addComponent("Form", componentLabel).then((componentId) => { - + return cy.addComponent("Form", componentLabel).then(componentId => { cy.getComponent(componentId) - .find(".placeholder_wrap").should("exist") - - cy.get("[data-cy=setting-field] .spectrum-InputGroup") - .should("have.class", "is-focused") - + .find(".component-placeholder") + .should("exist") cy.get("[data-cy=setting-field] button.spectrum-Picker").click() //Click the first appropriate field. They are filtered by type - cy.get("[data-cy=setting-field] .spectrum-Popover.is-open li.spectrum-Menu-item") - .contains(fieldTypeToColumnName[componentLabel]).click() + cy.get( + "[data-cy=setting-field] .spectrum-Popover.is-open li.spectrum-Menu-item" + ) + .contains(fieldTypeToColumnName[componentLabel]) + .click() cy.wait(500) cy.getComponent(componentId) - .find(".placeholder_wrap").should("not.exist") + .find(".component-placeholder") + .should("not.exist") }) } - + cy.wait(500) - cy.wrap(componentTypeLabels).each((label) => { - return testFieldFocusOnCreate(label) - }).then(()=>{ - cy.get(".nav-items-container .nav-item").contains(formId).click({ force: true }) - deleteSelectedComponent() - }) - }) - }) - - it("should focus a charts settings on data provider if not nested in provider ", () => { - cy.addComponent("Layout", "Container").then((containerId) => { - - //For deletion - cy.get("[data-cy=setting-_instanceName] input") - .clear() - .type(containerId) - .blur() - - const chartTypeLabels = ["Bar Chart", "Line Chart", "Area Chart", "Pie Chart", - "Donut Chart", "Candlestick Chart"] - - const refocusTest = (componentId) => { - cy.getComponent(componentId) - .find(".showMe").should("exist").click({ force: true }) - - cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker") - .should("have.class", "is-focused") - } - - const testFocusOnCreate = (chartLabel) => { - cy.log("Adding: " + chartLabel) - cy.addComponent("Chart", chartLabel).then((componentId) => { - refocusTest(componentId) - - cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker") - .should("have.class", "is-focused") + cy.wrap(componentTypeLabels) + .each(label => { + return testFieldFocusOnCreate(label) + }) + .then(() => { + cy.get(".nav-items-container .nav-item") + .contains(formId) + .click({ force: true }) + deleteSelectedComponent() }) - } - - cy.wait(1000) - cy.wrap(chartTypeLabels).each((label) => { - return testFocusOnCreate(label) - }) - .then(()=>{ - cy.get(".nav-items-container .nav-item").contains(containerId).click({ force: true }) - deleteSelectedComponent() - }) - }) - }) it("should populate the provider for charts with a data provider in its path", () => { - cy.addComponent("Data", "Data Provider").then((providerId) => { - + cy.addComponent("Data", "Data Provider").then(providerId => { //For deletion cy.get("[data-cy=setting-_instanceName] input") .clear() .type(providerId) .blur() - - cy.get("[data-cy=setting-dataSource]") .contains("Choose an option") .click() - cy.get(`[data-cy=dataSource-popover-${providerId}] ul li`) .contains("dog") .click() - const chartTypeLabels = ["Bar Chart", "Line Chart", "Area Chart", "Pie Chart", - "Donut Chart", "Candlestick Chart"] + const chartTypeLabels = [ + "Bar Chart", + "Line Chart", + "Area Chart", + "Pie Chart", + "Donut Chart", + "Candlestick Chart", + ] - const testFocusOnCreate = (chartLabel) => { + const testFocusOnCreate = chartLabel => { cy.log("Adding: " + chartLabel) - cy.addComponent("Chart", chartLabel).then((componentId) => { - - cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker") - .should("not.have.class", "is-focused") + cy.addComponent("Chart", chartLabel).then(componentId => { + cy.get( + "[data-cy=dataProvider-prop-control] .spectrum-Picker" + ).should("not.have.class", "is-focused") // Pre populated. cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker-label") @@ -289,114 +192,86 @@ filterTests(['all'], () => { .should("exist") }) } - cy.wait(1000) - cy.wrap(chartTypeLabels).each((label) => { - return testFocusOnCreate(label) - }) - .then(()=>{ - cy.get(".nav-items-container .nav-item").contains(providerId).click({ force: true }) - deleteSelectedComponent() - }) + cy.wrap(chartTypeLabels) + .each(label => { + return testFocusOnCreate(label) + }) + .then(() => { + cy.get(".nav-items-container .nav-item") + .contains(providerId) + .click({ force: true }) + deleteSelectedComponent() + }) }) - }) it("should replace the placeholder when a url is set on an image", () => { - cy.addComponent("Elements", "Image").then((imageId) => { - - cy.get("[data-cy=url-prop-control] .spectrum-InputGroup") - .should("have.class", "is-focused") - + cy.addComponent("Elements", "Image").then(imageId => { cy.get("[data-cy=setting-_instanceName] input") .clear() .type(imageId) .blur() - //return $("New Data Provider.Rows")[0]["Attachment"][0]["url"] //No minio, so just enter something local that will not reslove cy.get("[data-cy=url-prop-control] input[type=text]") .type("cypress/fixtures/ghost.png") .blur() - cy.getComponent(imageId) - .find(".placeholder_wrap").should("not.exist") - - cy.getComponent(imageId) - .find(`img[alt=${imageId}]`).should("exist") - + .find(".component-placeholder") + .should("not.exist") + cy.getComponent(imageId).find(`img[alt=${imageId}]`).should("exist") cy.get(".nav-items-container .nav-item") .contains(imageId) .click({ force: true }) - deleteSelectedComponent() }) }) it("should add a markdown component.", () => { - cy.addComponent("Elements", "Markdown Viewer").then((markdownId) => { - - cy.get("[data-cy=value-prop-control] .spectrum-InputGroup") - .should("have.class", "is-focused") - + cy.addComponent("Elements", "Markdown Viewer").then(markdownId => { cy.get("[data-cy=setting-_instanceName] input") .clear() .type(markdownId) .blur() - - cy.get("[data-cy=value-prop-control] input[type=text].spectrum-Textfield-input") - .type("# Hi").blur() - + cy.get( + "[data-cy=value-prop-control] input[type=text].spectrum-Textfield-input" + ) + .type("# Hi") + .blur() cy.getComponent(markdownId) - .find(".placeholder_wrap").should("not.exist") - + .find(".component-placeholder") + .should("not.exist") cy.getComponent(markdownId) - .find(".editor-preview-full h1").contains("Hi") - + .find(".editor-preview-full h1") + .contains("Hi") cy.get(".nav-items-container .nav-item") .contains(markdownId) .click({ force: true }) - deleteSelectedComponent() }) }) it("should direct the user when adding an Icon component.", () => { - cy.addComponent("Elements", "Icon").then((iconId) => { - - cy.get("[data-cy=icon-prop-control] .spectrum-ActionButton") - .should("have.class", "is-focused") - - cy.getComponent(iconId) - .find(".placeholder_wrap").should("exist") - + cy.addComponent("Elements", "Icon").then(iconId => { + cy.getComponent(iconId).find(".component-placeholder").should("exist") cy.get("[data-cy=setting-_instanceName] input") .clear() .type(iconId) .blur() - cy.get("[data-cy=icon-prop-control] .spectrum-ActionButton").click() - cy.get("[data-cy=icon-popover].spectrum-Popover.is-open").within(() => { - cy.get(".search-input input") - .type("save") - .blur() - + cy.get(".search-input input").type("save").blur() cy.get(".search-input button").click({ force: true }) - cy.get(".icon-area .icon-container").eq(0).click({ force: true }) }) - cy.getComponent(iconId) - .find(".placeholder_wrap").should("not.exist") - - cy.getComponent(iconId) - .find("i.ri-save-fill").should("exist") - + .find(".component-placeholder") + .should("not.exist") + cy.getComponent(iconId).find("i.ri-save-fill").should("exist") cy.get(".nav-items-container .nav-item") .contains(iconId) .click({ force: true }) - deleteSelectedComponent() }) }) diff --git a/packages/builder/cypress/integration/renameAnApplication.spec.js b/packages/builder/cypress/integration/renameAnApplication.spec.js index e1bbbb1241..8c92935481 100644 --- a/packages/builder/cypress/integration/renameAnApplication.spec.js +++ b/packages/builder/cypress/integration/renameAnApplication.spec.js @@ -1,7 +1,7 @@ import filterTests from "../support/filterTests" -const interact = require('../support/interact') +const interact = require("../support/interact") -filterTests(['all'], () => { +filterTests(["all"], () => { context("Rename an App", () => { beforeEach(() => { cy.login() @@ -29,12 +29,15 @@ filterTests(['all'], () => { const appRename = "Cypress Renamed" // Publish the app cy.get(interact.TOP_RIGHT_NAV) - cy.get(interact.SPECTRUM_BUTTON).contains("Publish").click({ force: true }) - cy.get(interact.SPECTRUM_DIALOG_GRID) - .within(() => { - // Click publish again within the modal - cy.get(interact.SPECTRUM_BUTTON).contains("Publish").click({ force: true }) - }) + cy.get(interact.SPECTRUM_BUTTON) + .contains("Publish") + .click({ force: true }) + cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => { + // Click publish again within the modal + cy.get(interact.SPECTRUM_BUTTON) + .contains("Publish") + .click({ force: true }) + }) // Rename app, Search for app, Confirm name was changed cy.visit(`${Cypress.config().baseUrl}/builder`) renameApp(appName, appRename, true) @@ -56,14 +59,20 @@ filterTests(['all'], () => { // It is not possible to have applications with the same name const appName = "Cypress Tests" cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(interact.SPECTRUM_BUTTON, { timeout: 500 }).contains("Create app").click({ force: true }) + cy.get(interact.SPECTRUM_BUTTON), { timeout: 500 } + .contains("Create app") + .click({ force: true }) cy.contains(/Start from scratch/).click() - cy.get(interact.SPECTRUM_MODAL) - .within(() => { - cy.get("input").eq(0).type(appName) - cy.get(interact.SPECTRUM_BUTTON_GROUP).contains("Create app").click({ force: true }) - cy.get(interact.ERROR).should("have.text", "Another app with the same name already exists") - }) + cy.get(interact.SPECTRUM_MODAL).within(() => { + cy.get("input").eq(0).type(appName) + cy.get(interact.SPECTRUM_BUTTON_GROUP) + .contains("Create app") + .click({ force: true }) + cy.get(interact.ERROR).should( + "have.text", + "Another app with the same name already exists" + ) + }) }) it("should validate application names", () => { @@ -78,7 +87,10 @@ filterTests(['all'], () => { cy.applicationInAppTable(numberName) cy.reload() renameApp(numberName, specialCharName) - cy.get(interact.ERROR).should("have.text", "App name must be letters, numbers and spaces only") + cy.get(interact.ERROR).should( + "have.text", + "App name must be letters, numbers and spaces only" + ) // Set app name back to Cypress Tests cy.reload() renameApp(numberName, appName) @@ -86,24 +98,19 @@ filterTests(['all'], () => { const renameApp = (originalName, changedName, published, noName) => { cy.searchForApplication(originalName) - cy.get(interact.APP_TABLE, { timeout: 1000 }) - .within(() => { - cy.get(interact.AREA_LABEL_MORE).eq(0).click() - }) - // Check for when an app is published - if (published == true) { - // Should not have Edit as option, will unpublish app - cy.should("not.have.value", "Edit") - cy.get(interact.SPECTRUM_MENU).contains("Unpublish").click() - cy.get(interact.SPECTRUM_DIALOG_GRID).contains("Unpublish app").click() - cy.get(".appTable > :nth-child(5) > :nth-child(2) > .spectrum-Icon").click() - } - cy.get(interact.APP_ROW_ACTION_MENU_POPOVER).eq(0).within(() => { - cy.get(interact.SPECTRUM_MENU_ITEMM).contains("Edit").click({ force: true }) + cy.get(interact.APP_TABLE, { timeout: 1000 }).within(() => { + cy.get(".app-row-actions button") + .contains("Manage") + .eq(0) + .click({ force: true }) }) - + cy.get(".spectrum-Tabs-item").contains("Settings").click() + cy.get(".spectrum-Tabs-item.is-selected").contains("Settings") + cy.get(".settings-tab").should("be.visible") + cy.get(".details-section .page-action button") + .contains("Edit") + .click({ force: true }) cy.updateAppName(changedName, noName) - } }) }) diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index f480dd69c0..036517e7b9 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -160,20 +160,27 @@ Cypress.Commands.add("deleteApp", name => { return } + // Go to app overview const appIdParsed = appId.split("_").pop() const actionEleId = `[data-cy=row_actions_${appIdParsed}]` cy.get(actionEleId).within(() => { - cy.get(".spectrum-Icon").eq(0).click({ force: true }) + cy.contains("Manage").click({ force: true }) }) - cy.get(".spectrum-Menu").then($menu => { - if ($menu.text().includes("Unpublish")) { - cy.get(".spectrum-Menu").contains("Unpublish").click() - cy.get(".spectrum-Dialog-grid").contains("Unpublish app").click() + cy.wait(1000) + + // Unpublish first if needed + cy.get(`[data-cy="app-status"]`).then($status => { + if ($status.text().includes("Last published")) { + cy.contains("Unpublish").click() + cy.get(".spectrum-Modal").within(() => { + cy.contains("Unpublish app").click() + }) } }) - cy.get(actionEleId).within(() => { - cy.get(".spectrum-Icon").eq(0).click({ force: true }) + // Delete app + cy.get(".app-overview-actions-icon").within(() => { + cy.get(".spectrum-Icon").click({ force: true }) }) cy.get(".spectrum-Menu").contains("Delete").click() cy.get(".spectrum-Dialog-grid").within(() => { @@ -196,17 +203,7 @@ Cypress.Commands.add("deleteAllApps", () => { .its("body") .then(val => { for (let i = 0; i < val.length; i++) { - const appIdParsed = val[i].appId.split("_").pop() - const actionEleId = `[data-cy=row_actions_${appIdParsed}]` - cy.get(actionEleId).within(() => { - cy.get(".spectrum-Icon").eq(0).click({ force: true }) - }) - - cy.get(".spectrum-Menu").contains("Delete").click() - cy.get(".spectrum-Dialog-grid").within(() => { - cy.get("input").type(val[i].name) - cy.get(".spectrum-Button--warning").click() - }) + cy.deleteApp(val[i].name) cy.reload() } }) diff --git a/packages/builder/package.json b/packages/builder/package.json index 5a08d88de0..1e0c30755e 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/builder", - "version": "1.0.206", + "version": "1.0.207-alpha.4", "license": "GPL-3.0", "private": true, "scripts": { @@ -69,10 +69,10 @@ } }, "dependencies": { - "@budibase/bbui": "^1.0.206", - "@budibase/client": "^1.0.206", - "@budibase/frontend-core": "^1.0.206", - "@budibase/string-templates": "^1.0.206", + "@budibase/bbui": "^1.0.207-alpha.4", + "@budibase/client": "^1.0.207-alpha.4", + "@budibase/frontend-core": "^1.0.207-alpha.4", + "@budibase/string-templates": "^1.0.207-alpha.4", "@sentry/browser": "5.19.1", "@spectrum-css/page": "^3.0.1", "@spectrum-css/vars": "^3.0.1", diff --git a/packages/builder/src/components/common/AppLockModal.svelte b/packages/builder/src/components/common/AppLockModal.svelte index 75e2b15925..5ca35f05db 100644 --- a/packages/builder/src/components/common/AppLockModal.svelte +++ b/packages/builder/src/components/common/AppLockModal.svelte @@ -87,7 +87,7 @@ {#if lockedByYou && getExpiryDuration(app) > 0} {processStringSync( - "This lock will expire in {{ duration time 'millisecond' }} from now", + "This lock will expire in {{ duration time 'millisecond' }} from now.", { time: getExpiryDuration(app), } @@ -141,4 +141,8 @@ gap: var(--spacing-s); max-width: 175px; } + .lock-status-text { + font-weight: 400; + color: var(--spectrum-global-color-gray-800); + } diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte index d30b8079d7..49f99c9f77 100644 --- a/packages/builder/src/components/start/AppRow.svelte +++ b/packages/builder/src/components/start/AppRow.svelte @@ -1,18 +1,11 @@
@@ -20,7 +13,7 @@
-
appOverview(app)}> +
editApp(app)}> {app.name} @@ -37,7 +30,7 @@ {/if}
- +
@@ -52,47 +45,27 @@
+ -
- - - - - {#if app.lockedYou} - releaseLock(app)} icon="LockOpen"> - Release lock - - {/if} - exportApp(app)} icon="Download">Export - {#if app.deployed} - unpublishApp(app)} icon="GlobeRemove"> - Unpublish - - copyAppId(app)} icon="Copy"> - Copy App ID - - {/if} - {#if !app.deployed} - updateApp(app)} icon="Edit">Edit - deleteApp(app)} icon="Delete">Delete - {/if} - editIcon(app)} icon="Brush">Edit icon -