CP-Comments

This web component is intended to be used with the red_hat_comments Drupal module.

This component had a rocky development process and is a bit different from working on most components. It's recommended to develop on this with a local Drupal environment, possibly many Drupal development environments.

Getting Started

See CP Elements Docs for general instructions getting setup, there's helpful info about getting your environment setup and other helpful information.

To get a proper dev setup get CP-comments setup in a Drupal environment:

• Setup DXP Commenting Platform - Repo instructions: https://gitlab.cee.redhat.com/dxp/customer-portal/dxp-commenting-platform
• Getting CP Elements plugged into the DXP Commenting Platform: https://docs.google.com/document/d/13KIqOg4XNc0NpTaGKuxDsmCJZKbliGw457usl6cXpaA/edit#

Also see the architecture documentation.

Compiling

From inside this folder run:

npm run dev

From CP Elements git root run:

# Only watches and compiles CP-Comments and it's dependencies
npm run dev cp-comments

# Or this command that launches a web server and watches/compiles all components:
npm start

The web server is not helpful for CP Elements at time of writing, it only works well in a Drupal context.

Dependencies

• PFelement base class
• pfe-avatar
• pfe-button

CSS Variables

| CSS Property Name | Default | Description | | ----------------------------- | ------- | ----------------------- | |--cp-comments__loader__color | #ccc | Color of the loading spinner |

Events

cp-comments:comments-loaded

Fires when the first/another batch of comments have been loaded

• event.detail.commentCount: Total comments (from all pages)
• event.detail.cpComments: A reference to the cp-comments element

cp-comments:comment-added

Fires when a comment has been successfully added. Includes:

• event.detail.commentCount: Total comments (from all pages)
• event.detail.cpComments: A reference to the cp-comments element

cp-comments:comment-deleted

Fires when a comment is successfully deleted. Includes:

• event.detail.commentCount: Total comments (from all pages)
• event.detail.cpComments: A reference to the cp-comments element

pfeconfig-query

Fires when component loads and is ready for config from the host site. See docroot/modules/contrib/red_hat_comments/templates/comments-block.html.twig on the Commenting Platform, which captures the event and sets the config on cp-comments.

Development Process

At time of writing, we're in the middle of heavy development, and need to coordinate multiple folks working on the code, pushing code to QA, and code review.

The process (for now) is:

1. For new work create a feature branch from epic/cp-comments-1x/integration, it's recommended to use DAT branch naming for consistency:

   feature/USERNAME/TICKET--SHORT-DESCRIPTION
   
   For example:
   feature/wruvalca/CPCORE-9212--fixing-authentication`

2. You can run npm run dev cp-comments from CP Elements git root, or npm run dev from the CP Comments folder to watch and build code.
3. Work on your feature in your branch until it's ready for review.
4. Create an MR in Gitlab against main.
5. Coordinate with Wes and other devs to create a new version on NPM, so we can push the code to QA.

Releasing to Preprod

Check with devs working on cp-comments to see if they're close to needing a release to combine efforts.

1. Make sure all code for the release is merged to epic/cp-comments-1x/integration
2. Push the updated epic/cp-comments-1x/integration to GitLab
3. Make sure you're on the right version of node (nvm use or similar for CP Elements gitroot)
4. Go to elements/cp-comments
5. Run npm version patch (assuming you want a patch and not )
6. Run npm run build (this ensures the component will report the right version from it's API)
7. npm publish --access=public
8. Go to CP Chrome and checkout epic/cp-comments-1x/integration
9. Update the cp-comments version in j/public_modules/package.json
10. Commit
11. Follow the instructions from here starting at step 4: https://docs.engineering.redhat.com/pages/viewpage.action?pageId=310386287
12. Do a CP Chrome release to Dev and QA, and optionally stage. If you aren't familiar with the process, it is highly recommended to find someone who is, as it's a tedious and confusing release process. Documentation is available though.