Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Get rid of dependencies in Chat module and prepare a simple app page #2

Merged
merged 66 commits into from
Feb 12, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
66 commits
Select commit Hold shift + click to select a range
249c2ff
setup app and add readme
Slashek Dec 19, 2024
cea5e28
remove community module dependence
Slashek Dec 31, 2024
bd955f2
Working chat with updated ActionCable
z-x Dec 31, 2024
400c1ef
Node deps cleanup
z-x Dec 31, 2024
178df74
Working import maps
z-x Jan 2, 2025
3d36d5d
Fixed missing var, chat works now
z-x Jan 7, 2025
05f30bb
Clean up node modules
z-x Jan 7, 2025
4f308c8
Initial styling
z-x Jan 7, 2025
7a0bb34
Header styling
z-x Jan 7, 2025
41fc00d
Styling further
z-x Jan 7, 2025
aa58a4b
Inbox styling
z-x Jan 8, 2025
270db5e
Basic conversation styling
z-x Jan 9, 2025
8537f59
Textarea styling
z-x Jan 9, 2025
8b5ad47
Updated layout not to overflow viewport height
z-x Jan 9, 2025
42c14b8
Intro page styling
z-x Jan 9, 2025
2421f46
Use HTML template from BE instead of HTML hardcoded in JS files
z-x Jan 13, 2025
834c67a
Fixed loading previous messages page
z-x Jan 13, 2025
56f2b65
Forms styling
z-x Jan 14, 2025
ed24d2d
add playwright
Jan 14, 2025
69fffa8
delete playwright.yml
Jan 14, 2025
4f965c2
Cleanup
z-x Jan 14, 2025
fec9812
make seed.sh executable
Jan 14, 2025
0ccaf20
fix MPKIT_TOKEN
Jan 14, 2025
2ed7e17
fix data path in seed.sh
Jan 14, 2025
62a78d5
fix path
Jan 14, 2025
6e53037
add seed
Jan 14, 2025
b92e5b5
add new users
Jan 14, 2025
2399156
Mobile view
z-x Jan 15, 2025
015a56f
Hide back arrow on desktop
z-x Jan 15, 2025
0cd7fb6
add messaging test
Jan 17, 2025
d8ff835
Merge branch 'run-tests' into setup-app-to-deploy-independently
Jan 17, 2025
e711297
Merge branch 'main' into setup-app-to-deploy-independently
z-x Jan 20, 2025
43a231c
Renamed the styles module
z-x Jan 20, 2025
d285f8c
Merge branch 'setup-app-to-deploy-independently' of https://github.co…
z-x Jan 20, 2025
b321443
Use default pOS brand colors in config and overwrite them in app
z-x Jan 20, 2025
f6ff495
Updated Readme
z-x Jan 21, 2025
33da82c
Updated reset to be scroped only to .pos-app
z-x Jan 21, 2025
8b58d03
Updated modules deps
z-x Jan 21, 2025
760f691
Updated readme
z-x Jan 21, 2025
5e6ee6e
Disable debug mode
z-x Jan 21, 2025
fe8c922
use current profile helper
Slashek Jan 22, 2025
0ff7b21
Merge branch 'setup-app-to-deploy-independently' into use-current-pro…
z-x Jan 22, 2025
b4b4bc0
Merge pull request #7 from Platform-OS/use-current-profile-helper
z-x Jan 22, 2025
4319a22
Sth
z-x Jan 23, 2025
136d3f5
Solve conflicts
z-x Jan 23, 2025
eee32c5
Use new current profile helper
z-x Jan 23, 2025
dc06391
Removed components deps
z-x Jan 23, 2025
7560a06
make the find by uuid more reliable
Slashek Jan 23, 2025
e5a7bae
Merge pull request #8 from Platform-OS/make-the-find-by-uuid-more-rel…
z-x Jan 27, 2025
ffdc204
New namespacing
z-x Jan 27, 2025
bb021fc
Moved profile data from HTML input to JS vars
z-x Jan 28, 2025
6d51cb3
Idk
z-x Jan 30, 2025
bf96f68
Updated
z-x Feb 2, 2025
9329a0b
Updated common-styling
z-x Feb 2, 2025
f4661ce
Updated common-styling
z-x Feb 3, 2025
56075db
Fix timezone JS var
z-x Feb 4, 2025
110fe84
Fixed width for conversations
z-x Feb 11, 2025
e271ac3
Cleanup
z-x Feb 11, 2025
d05228a
Updated readme
z-x Feb 11, 2025
141c311
Updated the components module and overwritten the button
z-x Feb 11, 2025
d0b9183
Bump version
z-x Feb 11, 2025
6f50844
Fixed <small> not being resseted
z-x Feb 11, 2025
73187cb
Updated common-styling
z-x Feb 11, 2025
c6512f3
Bump common-styling deps
z-x Feb 11, 2025
fb55bdf
Update chat message input radius
z-x Feb 12, 2025
4e60f30
Bump version
z-x Feb 12, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
111 changes: 111 additions & 0 deletions .github/workflows/e2e_tests.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
name: E2E tests
on:
push:
branches:
- 'master'
- 'main'
paths-ignore:
- ".github/**"
pull_request:
branches:
- 'main'
paths-ignore:
- ".github/**"
workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
pre_job:
# continue-on-error: true # Uncomment once integration is finished
runs-on: ubuntu-latest
# Map a step output to a job output
outputs:
should_skip: ${{ steps.skip_check.outputs.should_skip }}
steps:
- id: skip_check
uses: fkirc/skip-duplicate-actions@master
with:
github_token: ${{ github.token }}
paths_ignore: '["**/README.md"]'
do_not_skip: '["push"]'

reserve-ci-instance:
needs: pre_job
if: ${{ needs.pre_job.outputs.should_skip != 'true' }}
runs-on: ubuntu-latest
container: alpine:3.20
outputs:
mpkit-url: ${{ steps.reserve.outputs.mpkit-url }}
report-path: ${{ steps.reserve.outputs.report-path }}
steps:
- name: Get ci-instance-url
id: reserve
uses: Platform-OS/[email protected]
with:
repository-url: ${{ vars.CI_REPOSITORY_URL }}
method: reserve
pos-ci-repo-token: ${{ secrets.POS_CI_REPO_ACCESS_TOKEN }}

deploy:
needs: ["reserve-ci-instance"]
runs-on: ubuntu-latest
container: platformos/playwright:5.1.5-1.47.2
strategy:
matrix:
node-version: [20.x]
timeout-minutes: 5
env:
MPKIT_EMAIL: ${{ secrets.MPKIT_EMAIL }}
MPKIT_TOKEN: ${{ secrets.MPKIT_TOKEN }}
MPKIT_URL: ${{ needs.reserve-ci-instance.outputs.mpkit-url }}
CI: true
steps:
- uses: actions/checkout@v4

- uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}

- name: Deploy
timeout-minutes: 6
shell: sh
run: |
set -eu
./tests/data/seed/seed.sh

test:
needs: ["reserve-ci-instance", "deploy"]
runs-on: ubuntu-latest
container: platformos/playwright:5.1.5-1.47.2
timeout-minutes: 35
env:
MPKIT_EMAIL: ${{ secrets.MPKIT_EMAIL }}
#MPKIT_TOKEN: ${{ secrets.MPKIT_TOKEN }}
MPKIT_TOKEN: ${{ secrets.QA0_ACCESS_TOKEN }}
MPKIT_URL: ${{ needs.reserve-ci-instance.outputs.mpkit-url }}
REPORT_PATH: ${{ needs.reserve-ci-instance.outputs.report-path }}
E2E_TEST_PASSWORD: ${{ secrets.E2E_TEST_PASSWORD }}
UPLOAD_HOST: https://test-reports.platformos.dev
CI: true
steps:
- uses: actions/checkout@v4

- name: Run Playwright tests
if: success() || failure()
run: |
npm run pw-tests
env:
HOME: /root

cleanup:
if: ${{ always() }}
needs: ["reserve-ci-instance", "deploy", "test"]
runs-on: ubuntu-latest
container: alpine:3.20
steps:
- name: release ci-instance-url
uses: Platform-OS/[email protected]
with:
method: release
repository-url: ${{ vars.CI_REPOSITORY_URL }}
pos-ci-repo-token: ${{ secrets.POS_CI_REPO_ACCESS_TOKEN }}
11 changes: 11 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
node_modules
.pos
tmp
test/pictures/
test/screenshots
test/reports/video/
seed/data.csv
seed/models.csv
test-report.html
test-report.json
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
modules/core
modules/tests
125 changes: 124 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,124 @@
# pos-module-chat
# Chat Module

This module serves as a starting point for adding real time chat to your application. Before using the module for the first time, we recommend reading the official platformOS documentation on [WebSockets](https://documentation.platformos.com/use-cases/using-websockets) and on [Example Application](#example-application).

This module follows the [platformOS DevKit best practices](https://documentation.staging.oregon.platform-os.com/developer-guide/modules/platformos-modules) and includes the [core module](https://github.com/Platform-OS/pos-module-core) as a dependency, enabling you to implement patterns such as [Commands](https://github.com/Platform-OS/pos-module-core?tab=readme-ov-file#commands--business-logic) and [Events](https://github.com/Platform-OS/pos-module-core?tab=readme-ov-file#events). It also includes the [user module](https://github.com/Platform-OS/pos-module-user) and [profile module](https://github.com/Platform-OS/pos-module-profile) as a dependency.

For more information,
- read the documentation about the [built-in User table](https://documentation.platformos.com/developer-guide/users/user),
- learn about [how platformOS manages sessions](https://documentation.platformos.com/developer-guide/users/session),
- and gain a high-level overview of [authentication strategies in platformOS](https://documentation.platformos.com/developer-guide/users/authentication).

## Installation

The platformOS Chat Module is available on the [Partner Portal Modules Marketplace](https://partners.platformos.com/marketplace/pos_modules/152).

### Prerequisites

Before installing the module, ensure that you have [pos-cli](https://github.com/mdyd-dev/pos-cli#overview) installed. This tool is essential for managing and deploying platformOS projects.

The platformOS Chat Module is fully compatible with [platformOS Check](https://github.com/Platform-OS/platformos-lsp#platformos-check----a-linter-for-platformos), a linter and language server that supports any IDE with Language Server Protocol (LSP) integration. For Visual Studio Code users, you can enhance your development experience by installing the [VSCode platformOS Check Extension](https://marketplace.visualstudio.com/items?itemName=platformOS.platformos-check-vscode).

### Installation Steps

1. **Navigate to your project directory** where you want to install the Chat Module.

2. **Run the installation command**:

```bash
pos-cli modules install chat
```

This command installs the Chat Module along with its dependencies (such as [pos-module-core](https://github.com/Platform-OS/pos-module-core)) and updates or creates the `app/pos-modules.json` file in your project directory to track module configurations.

### Setup

1. **Install the module** using the [pos-cli](https://github.com/Platform-OS/pos-cli).

2. If you haven't done it already, follow the instructions to setup [pos-module-user-](https://github.com/Platform-OS/pos-module-user?tab=readme-ov-file#setup). During this process, you will create an overwrite of the permissions file `app/modules/user/public/lib/queries/role_permissions/permissions.liquid`

3. Overwrite default views that you would like to customize by following the guide on [overwriting a module file](https://documentation.platformos.com/developer-guide/modules/modules#overwritting-a-module-file). This allows you to add functionality based on your project requirements. At a minimum, you should overwrite the [permissions file](modules/user/public/lib/queries/role_permissions/permissions.liquid), where you will configure [RBAC authorization](#rbac-authorization) roles and permissions for your application - add `chat.inbox` permission to the role(s) that you would like to have access to the chat available at `/inbox`. In our example, the `inbox.chat` permission was added to `authenticated` role, meaning all signed in users have access to the chat. Snippet to create an overwrite to copy-paste into your terminal:

```
mkdir -p app/modules/user/public/lib/queries/role_permissions
cp modules/user/public/lib/queries/role_permissions/permissions.liquid app/modules/user/public/lib/queries/role_permissions/permissions.liquid
```

4. Add the following to the `<head>` section of your application layout to get the basic styling provided with the module. To overwrite the colors and spacings you can overwrite the CSS variables in `pos-config.css`.

```
<link rel="stylesheet" href="{{ 'modules/common-styling/style/pos-reset.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'modules/common-styling/style/pos-config.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'modules/common-styling/style/pos-button.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'modules/common-styling/style/pos-typography.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'modules/common-styling/style/pos-avatar.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'modules/common-styling/style/pos-forms.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'modules/common-styling/style/pos-page.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'modules/chat/style/pos-chat-inbox.css' | asset_url }}">
```

5. Add the following to the `<head>` section of your application layout **before any other `<script>` tag on the page**. Or - if you already using an import map, just extend it with the following:

```
<script type="importmap">
{
"imports": {
"/": "{{ 'modules/chat/js/' | asset_url }}",
"pos-chat.js": "{{ 'modules/chat/js/pos-chat.js' | asset_url }}",
"pos-chat-consumer.js": "{{ 'modules/chat/js/pos-chat-consumer.js' | asset_url }}",
"pos-chat-csrfToken.js": "{{ 'modules/chat/js/pos-chat-csrfToken.js' | asset_url }}",
"pos-chat-notifications.js": "{{ 'modules/chat/js/pos-chat-notifications.js' | asset_url }}",
"./": "./"
}
}
</script>
```

### Managing Module Files

The default behavior of modules is that **the files are never deleted**. It is assumed that developers might not have access to all of the files, and thanks to this feature, they can still overwrite some of the module's files without breaking them. Since the User Module is fully public, it is recommended to delete files on deployment. To do this, ensure your `app/config.yml` includes the User Module and its dependencies in the list `modules_that_allow_delete_on_deploy`:

``` yaml
modules_that_allow_delete_on_deploy:
- core
- user
- profile
- chat
```

## Example application

We recommend creating a [new Instance](https://partners.platformos.com/instances/new) and deploying this module as an application to get a better understanding of the basics and the functionality this module provides. When you install the module using `pos-cli modules install chat`, only the contents of the `modules/chat` will be available in your project. The `app` directory serves as an example of how you could incorporate the Chat Module into your application. When analyzing the code in the `app` directory, pay attention to the following files:

* ** `app/config.yml`** and **`app/user.yml`**: These files are defined according to the [Setup](#setup) instructions.
* ** `app/modules/user/public/lib/queries/role_permissions/permissions.liquid`**: Demonstrates how to configure permissions in your application by [overwriting a module file](https://documentation.platformos.com/developer-guide/modules/modules#overwriting-a-module-file).

## Functionality provided by the chat module:

Once the module is installed and you have completed the [setup](#setup), you will immediately gain access to the new endpoints created by this module. For example, you can navigate to `/inbox` for the chat window.

- [x] **[Inbox](#inbox)**:

TODO (Upcoming Features)


### Inbox

Inbox

#### Endpoints for the registration

The table below outlines the [resourceful routes](https://documentation.platformos.com/developer-guide/modules/platformos-modules#resourceful-route-naming-convention) provided for registration functionality:

| HTTP method | slug | page file path | description
|---|---|---|---|---|
| GET | /inbox | `modules/chat/public/views/pages/inbox.liquid` | Renders a chat |

#### CRUD commands

...


## Customizing the looks

The chat module by default uses styling provided by the platformOS Common Styling module. It's built with the intention to easily overwrite the colors, fonts and spacings by overwriting the CSS variables stored in `modules/common-styling/style/pos-config.css`. You can create your own `.css` file and just overwrite any value of any variable. If you need more CSS customization you can obviously just use standard styling techniques and if you need to change the HTML structure even further, you can overwrite any liquid partial used in the chat.
Binary file not shown.
Binary file not shown.
76 changes: 76 additions & 0 deletions app/assets/images/pos-sign.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions app/assets/js/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/*
initializes the application
*/


// purpose: main application namespace object
// ************************************************************************
const application = {};
// stores each module instance and it's api
application.module = {};
Loading