Skip to content

Commit

Permalink
Merge branch 'develop' into migrate-angular-mui-mdc-components-update…
Browse files Browse the repository at this point in the history
…d to reduce difference, adding new documentation, LinkAction block but with packages from Angular branch chosen.
  • Loading branch information
lukestanley committed Oct 21, 2024
2 parents 44bc9e9 + 22819b4 commit 64bfcdc
Show file tree
Hide file tree
Showing 29 changed files with 1,120 additions and 267 deletions.
36 changes: 36 additions & 0 deletions .github/ISSUE_TEMPLATE/bug_report.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: ''
assignees: ''

---

**Bug description**
<!-- A clear and concise description of what the bug is. -->

<!-- Screenshot and / or short video can be really helpful in understanding the issue, especially for dynamic or interactive bugs. -->

**Reproduction steps**
<!-- Provide steps to reproduce the behaviour, e.g: -->
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

**Expected behaviour**
<!-- Explain clearly and simply what you expected to happen instead of the bug. -->

**Flow Configuration** <!-- To help diagnose issues with Flows, the flow's JSON configuration or a shared link to the Flow makes it easier to replicate and understand the issue. For ways to share flows see: https://kendraio-app.readthedocs.io/en/latest/workflow/sharing.html -->

**Runtime environment**
- OS: <!-- [e.g. Ubuntu] -->
- Browser: <!-- [e.g. Firefox 123, Chrome 45, Safari 67] -->
- App version:
- Angular Version: <!-- (if known) -->

**Additional context**
<!--Add any other context about the problem here. -->

<!--- Please check for label tags that match the issue type, e.g., use 'state' tag for state reactivity bugs. -->
33 changes: 17 additions & 16 deletions PAYMENTS.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,35 @@ The "**Web Money block**" can be used in a flow to stream ILP payments in real t
We enable Coil users to stream XRP using Web Monetization's Interledger Protocol. The block works with, or without the Coil browser extension, and the account balances can be seen by recipients using the Wallet block to see (currently integrated using Uphold OAuth).

Check out the screencast videos:
- [Kendraio Player with Coil login, Web Monetization without a browser extension](https://www.youtube.com/watch?v=T2yXWJKIgOQ)

- [Uphold API integrated with Kendraio App Wallet Block](https://www.youtube.com/watch?v=QoZA2F-ddd8)
- [Kendraio Player with Coil login, Web Monetization without a browser extension](https://www.youtube.com/watch?v=T2yXWJKIgOQ)

- [Uphold API integrated with Kendraio App Wallet Block](https://www.youtube.com/watch?v=QoZA2F-ddd8)

**Block documentation**

- [Web Money Block](https://github.com/kendraio/kendraio-app/blob/main/docs/workflow/blocks/web_money.rst)
- [Web Money Block](https://github.com/kendraio/kendraio-app/blob/main/docs/workflow/blocks/web_money.rst)

- [Wallet Block](https://github.com/kendraio/kendraio-app/blob/main/docs/workflow/blocks/wallet.rst)
- [Wallet Block](https://github.com/kendraio/kendraio-app/blob/main/docs/workflow/blocks/wallet.rst)

**Example flows**

- Check out our Player:
<https://app.kendra.io/player/all>
- Check out our Player:
<https://app.kendra.io/player/all>

- Wallet Block demo:
<https://app.kendra.io/dsp1/walletArray>
- Wallet Block demo:
<https://app.kendra.io/distributor/walletArray>

- Statistics using anonymous analytics:
<https://app.kendra.io/player/stats>
- Statistics using anonymous analytics:
<https://app.kendra.io/player/stats>

**Components:**

- Web Money block:
<https://github.com/kendraio/kendraio-app/blob/main/src/app/blocks/web-money/web-money.component.ts>
- Web Money block:
<https://github.com/kendraio/kendraio-app/blob/main/src/app/blocks/web-money/web-money.component.ts>

- Wallet block:
https://github.com/kendraio/kendraio-app/blob/main/src/app/blocks/wallet/wallet.component.ts
- Wallet block:
https://github.com/kendraio/kendraio-app/blob/main/src/app/blocks/wallet/wallet.component.ts

- Uphold service library:
https://github.com/kendraio/kendraio-app/blob/main/src/app/_shared/services/uphold_service.ts
- Uphold service library:
https://github.com/kendraio/kendraio-app/blob/main/src/app/_shared/services/uphold_service.ts
77 changes: 30 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@

Kendraio App
============
# Kendraio App

Kendraio App is an open source dashboard application for rights owners, music makers, managers and record labels, enabling users to manage and track their digital media assets, collaborations and associated rights.

Expand All @@ -23,8 +21,7 @@ Kendraio App is an open source dashboard application for rights owners, music ma

![Angular Version](https://img.shields.io/github/package-json/dependency-version/kendraio/kendraio-app/@angular/core)

Contribute
----------
## Contribute

- Read the documentation: <https://kendraio-app.readthedocs.io>
- For help and support, join the conversation on Slack: <http://slack.kendra.io>
Expand All @@ -33,8 +30,7 @@ Contribute
- To download the source code, visit the repo: <https://github.com/kendraio/kendraio-app>
- Sponsored by [▲ Vercel](https://vercel.com?utm_source=kendraio&utm_campaign=oss), [Mailgun](https://www.mailgun.com), [Atlassian](https://www.atlassian.com), [Auth0](https://auth0.com)

Instant Development with Github Codespaces
------------------------------------------
## Instant Development with Github Codespaces

If you have access to github codespaces, you can start developing on Kendraio immediately.
The "code" button on our github page (https://github.com/kendraio/kendraio-app) will offer you
Expand All @@ -48,59 +44,50 @@ to "localhost:4200", click on this link to open the running Kndraio app in a new

You now have a live development environment. Create yourself a branch and you're off.

The Devcontainer.json file
===========================
A devcontainer.json file in your project tells Visual Studio Code (and other services and tools that support the format) how to access (or create) a development container with a well-defined tool and runtime stack. This file is used to automatically configure Codespaces, and it will also allow for local development using containers.
# The Devcontainer.json file

A devcontainer.json file in your project tells Visual Studio Code (and other services and tools that support the format) how to access (or create) a development container with a well-defined tool and runtime stack. This file is used to automatically configure Codespaces, and it will also allow for local development using containers.

Setting up a local development environment
------------------------------------------
## Setting up a local development environment

If you are not running inside a container, you will need to install node, npm, and the Angular CLI.

* Clone the repo.
* Run `npm install`

You can start the development server using `npm run serve:dev` or use `npm run e2e:serve_and_retest_on_change`, which will run the dev server and tests upon changes.
- Clone the repo.
- Run `npm install`

You can start the development server using `npm run serve:dev` or use `npm run test:serve_and_retest_on_change`, which will run the dev server and tests upon changes.

Running End-to-end tests with the development environment
------------------------------------------
## Running Unit and End-to-end tests with the development environment

`npm run e2e:serve_and_retest_on_change` will start the dev server, and run unit and E2E tests automatically upon file changes. It is useful for general local develoment.
`npm run test:serve_and_retest_on_change` will start the dev server, and run unit and E2E tests automatically upon file changes. It is useful for general local develoment.

`npm run e2e:retest_on_change` will re-run unit and E2E tests automatically upon file changes, but it needs a running server.
`npm run test:retest_on_change` will re-run unit and E2E tests automatically upon file changes, but it needs a running server.

`npm run e2e:autorun` is good for automatically running unit and E2E tests ONCE, using an already running server.
`npm run test:autorun` is good for automatically running unit and E2E tests ONCE, using an already running server.

`npm run e2e:serve_and_test` will start the dev server, and run unit and E2E headless tests once automatically and stop, producing a HTML report file and JSON file at `cypress/results/mochawesome.json` on first run.
`npm run test:serve_and_test` will start the dev server, and run unit and E2E headless tests once automatically and stop, producing a HTML report file and JSON file at `cypress/results/mochawesome.json` on first run.

The existing `npx ng e2e` Angular command works too, but requires clicking on the set of tests that need running. It builds and runs the server then runs E2E tests once.

Running tests in a container
============================
The predefined npm test commands have all been configured to run in a container, but if you are using alternative testing commands, you may find that testing fails due to the lack of a display. To get around this, use **xvfb-maybe**, which will set up a virtual display if one is needed.

To use xvfb-maybe, prefix any commandline with `npx xvfb-maybe`
eg:
* `npx xvfb-maybe ng test`

# Running tests in a container

The predefined npm test commands have all been configured to run in a container, but if you are using alternative testing commands, you may find that testing fails due to the lack of a display. To get around this, use **xvfb-maybe**, which will set up a virtual display if one is needed.

To use xvfb-maybe, prefix any commandline with `npx xvfb-maybe`
eg:

- `npx xvfb-maybe ng test`

Adding a "Block" (i.e. Task for the Flow editor)
--------------------------------------------------
## Adding a "Block" (i.e. Task for the Flow editor)

Use the Angular CLI to scaffold a new block: `npx ng g c blocks/my-block`
Edit the generated my-block.component.ts to make it a sub-class of BaseBlock.

Start by setting up your initial imports.

Start by setting up your initial imports.

```javascript
import { BaseBlockComponent } from '../base-block/base-block.component';
import {get} from 'lodash-es';
```javascript
import { BaseBlockComponent } from "../base-block/base-block.component";
import { get } from "lodash-es";
```

Take a look at one of the more recent blocks as an example, eg the AudioPlayer:
Expand All @@ -118,7 +105,7 @@ onConfigUpdate(config: any) {

onData(data: any, firstChange: boolean) {
// block is receiving data from the block before it in the flow
// if you need to pass data to the next block, call emit on output
// if you need to pass data to the next block, call emit on output
this.output.emit(this.model);
}
```
Expand All @@ -130,16 +117,12 @@ Add any required CSS to the stylesheet for the component.
To make the block show up in the App:
- Add the component to this horrible big switch block in the BlocksWorkflowComponent [src/app/components/blocks-workflow/blocks-workflow.component.html](src/app/components/blocks-workflow/blocks-workflow.component.html)
This is needed for the flow to show up in rendered workflows.
This is needed for the flow to show up in rendered workflows.
- Add a definition, and default configuration, for the block to the block types so it can appear in the "Add Task" dialog:
[src/app/dialogs/add-block-dialog/block-types.ts](src/app/dialogs/add-block-dialog/block-types.ts)
[src/app/dialogs/add-block-dialog/block-types.ts](src/app/dialogs/add-block-dialog/block-types.ts)
Adding a custom block editor interface
--------------------------------------
## Adding a custom block editor interface
The block editor is implemented using the blocks-editor component.
In order to create a custom editor, you will need to create a new component,
The block editor is implemented using the blocks-editor component.
In order to create a custom editor, you will need to create a new component,
and call it via [blocks-editor.component.html](/src/app/components/blocks-editor/blocks-editor.component.html)
1 change: 1 addition & 0 deletions cypress.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,5 +26,6 @@ export default defineConfig({
supportFile: false,
baseUrl: 'http://localhost:4200',
specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
experimentalRunAllSpecs: true
},
})
108 changes: 108 additions & 0 deletions cypress/e2e/actions.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import { loadFlowCode } from '../support/helper';

/// <reference types="Cypress" />


describe('Actions block type', () => {
it('should display a button with label, id and default color', () => {

loadFlowCode([
{
"type": "actions",
"buttons": [
{
"label": "OK",
"color": "primary",
"id": "button-primary",
"blocks": [
{
"type": "dispatch",
"action": "resetApp"
}
]
},
{
"label": "Cancel",
"id": "button-cancel",
"blocks": [
{
"type": "init"
}
]
}
]
}
]);
cy.get("#button-primary").should('exist');
cy.get("#button-primary").contains('OK');
cy.get("#button-primary").should('have.attr', 'ng-reflect-color', 'primary');
cy.get("#button-cancel").should('exist');
cy.get("#button-cancel").contains('Cancel');
});

it('should display a disabled button', () => {
loadFlowCode([
{
"type": "actions",
"buttons": [
{
"label": "Disabled",
"id": "button-disabled",
"blocks": [],
"enabledGetter": false
}
]
}
]);
cy.get("#button-disabled").should('exist');
cy.get("#button-disabled").should('have.attr', 'ng-reflect-disabled');
});
});


describe('LinkActionComponent', () => {
it('should generate the correct link URL from plain strings', () => {
// Tests with hardcoded values
loadFlowCode([
{
"type": "link-action",
"label": "Test Link",
"adapterName": "myAdapter",
"workflowId": "myWorkflow"
}
]);
cy.get('app-link-action a').should('have.attr', 'href', '/myAdapter/myWorkflow');
});

it('should generate the correct link URL using object mappings', () => {
// Test with JMESPath expressions
loadFlowCode([
{
"type": "mapping",
"mapping": "{ adapter: `testAdapter`, workflow: `testWorkflow` }"
},
{
"type": "link-action",
"label": "Dynamic Link",
"adapterNameGetter": "data.adapter",
"workflowIdGetter": "data.workflow"
}
]);
cy.get('app-link-action a').should('have.attr', 'href', '/testAdapter/testWorkflow');
});

it('should not have no link target by default', () => {
// The default behavior should be to open the link in the same tab,
// it's up to the user and their user-agent to decide how to handle the link.
loadFlowCode([
{
"type": "link-action",
"label": "Test Link",
"adapterName": "myAdapter",
"workflowId": "myWorkflow"
}
]);
cy.get('app-link-action a').should('not.have.attr', 'target');
});

});
5 changes: 3 additions & 2 deletions cypress/e2e/context_and_state.ts
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ describe('Kendraio context and state', () => {
"id": "button-enabled"
},
{
"label": "Hidden",
"label": "Visible and disabled",
"color": "default",
"blocks": [],
"enabledGetter": "state.global.disabled",
Expand All @@ -226,7 +226,8 @@ describe('Kendraio context and state', () => {
]
}]);
cy.get("#button-enabled").should('exist');
cy.contains("Hidden").should('not.exist');
cy.get("#button-disabled").should('exist');
cy.get("#button-disabled").should('have.attr', 'ng-reflect-disabled');
});

it('should allow the disabling of the datagrid', () => {
Expand Down
4 changes: 2 additions & 2 deletions docs/documentation.rst
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ code, and build the docs:

.. prompt:: bash $

pip install sphinx
pip install sphinx sphinx-prompt sphinx_rtd_theme
git clone https://github.com/kendraio/kendraio-app.git
cd docs
make html
Expand All @@ -35,7 +35,7 @@ Run the following commands (from the root of the repository, or change the paths

.. prompt:: bash $

pip install sphinx-autobuild
pip install sphinx-autobuild==2021.3.14
sphinx-autobuild docs/ docs/_build/html

Then go to http://127.0.0.1:8000 in the browser.
2 changes: 2 additions & 0 deletions docs/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ Kendraio App
workflow/blocks/gsheet
workflow/blocks/http
workflow/blocks/init
workflow/blocks/link_action_block
workflow/blocks/launch_block
workflow/blocks/load_schema
workflow/blocks/load_schema_template
Expand All @@ -82,4 +83,5 @@ Kendraio App
.. toctree::
:maxdepth: 2
:caption: Automated testing

testing/tips
Loading

0 comments on commit 64bfcdc

Please sign in to comment.