Refactor comment widget to use config map context (#185)

Fixes #184 

Changed to frontend fetching comment widget configuration via API to simplify the code.

```release-note
None
```

Author: ruibaby

packages/comment-widget/package.json

@@ -28,7 +28,9 @@
   ],
   "scripts": {
     "build": "tsc",
-    "dev": "tsc -w"
+    "dev": "tsc -w",
+    "locale:extract": "lit-localize extract",
+    "locale:build": "lit-localize build"
   },
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",

packages/comment-widget/src/base-form.ts

@@ -7,7 +7,7 @@ import { createRef, type Ref, ref } from 'lit/directives/ref.js';
 import {
   allowAnonymousCommentsContext,
   baseUrlContext,
-  captchaEnabledContext,
+  configMapDataContext,
   currentUserContext,
   groupContext,
   kindContext,
@@ -20,6 +20,7 @@ import { msg } from '@lit/localize';
 import type { ToastManager } from './lit-toast';
 import baseStyles from './styles/base';
 import varStyles from './styles/var';
+import type { ConfigMapData } from './types';
 
 export class BaseForm extends LitElement {
   @consume({ context: baseUrlContext })
@@ -30,13 +31,13 @@ export class BaseForm extends LitElement {
   @state()
   currentUser: User | undefined;
 
-  @consume({ context: allowAnonymousCommentsContext, subscribe: true })
+  @consume({ context: configMapDataContext })
   @state()
-  allowAnonymousComments = false;
+  configMapData: ConfigMapData | undefined;
 
-  @consume({ context: captchaEnabledContext, subscribe: true })
+  @consume({ context: allowAnonymousCommentsContext, subscribe: true })
   @state()
-  captchaEnabled = false;
+  allowAnonymousComments = false;
 
   @consume({ context: groupContext })
   @state()
@@ -78,18 +79,22 @@ export class BaseForm extends LitElement {
       .join('-')
       .replaceAll(/-+/g, '-')}`;
 
-    return `/login?redirect_uri=${encodeURIComponent(window.location.pathname + parentDomId)}`;
+    return `/login?redirect_uri=${encodeURIComponent(
+      window.location.pathname + parentDomId
+    )}`;
   }
 
   get showCaptcha() {
     return (
-      this.captchaEnabled && !this.currentUser && this.allowAnonymousComments
+      this.configMapData?.security.captcha.anonymousCommentCaptcha &&
+      !this.currentUser &&
+      this.allowAnonymousComments
     );
   }
 
   override updated(changedProperties: Map<string, unknown>) {
     if (
-      changedProperties.has('captchaEnabled') ||
+      changedProperties.has('configMapData') ||
       changedProperties.has('currentUser') ||
       changedProperties.has('allowAnonymousComments')
     ) {
@@ -138,9 +143,19 @@ export class BaseForm extends LitElement {
 
   renderAccountInfo() {
     return html`<div class="form__account-info">
-      ${this.currentUser?.spec.avatar ? html`<img src=${this.currentUser.spec.avatar} />` : ''}
-      <span> ${this.currentUser?.spec.displayName || this.currentUser?.metadata.name} </span>
-      <button @click=${this.handleLogout} type="button" class="form__button--logout">
+      ${
+        this.currentUser?.spec.avatar
+          ? html`<img src=${this.currentUser.spec.avatar} />`
+          : ''
+      }
+      <span>
+        ${this.currentUser?.spec.displayName || this.currentUser?.metadata.name}
+      </span>
+      <button
+        @click=${this.handleLogout}
+        type="button"
+        class="form__button--logout"
+      >
         ${msg('Logout')}
       </button>
     </div>`;
@@ -235,7 +250,7 @@ export class BaseForm extends LitElement {
           }
           <div class="form__actions">
             ${
-              this.showCaptcha
+              this.showCaptcha && this.captcha
                 ? html`
                   <div class="form__action--captcha">
                     <input
@@ -255,7 +270,11 @@ export class BaseForm extends LitElement {
             }
 
             <emoji-button @emoji-select=${this.onEmojiSelect}></emoji-button>
-            <button .disabled=${this.submitting} type="submit" class="form__button--submit">
+            <button
+              .disabled=${this.submitting}
+              type="submit"
+              class="form__button--submit"
+            >
               ${
                 this.submitting
                   ? html` <icon-loading></icon-loading>`
@@ -369,11 +388,7 @@ export class BaseForm extends LitElement {
         outline: 0;
         padding: 0.4em 0.75em;
         width: 100%;
-        transition:
-          background 0.2s,
-          border 0.2s,
-          box-shadow 0.2s,
-          color 0.2s;
+        transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
       }
 
       input:focus,

packages/comment-widget/src/comment-form.ts

@@ -149,7 +149,15 @@ export class CommentForm extends LitElement {
         );
       }
 
-      this.dispatchEvent(new CustomEvent('reload'));
+      window.dispatchEvent(
+        new CustomEvent('comment:reload', {
+          detail: {
+            page: 1,
+            scrollIntoView: true,
+          },
+        })
+      );
+
       this.baseFormRef.value?.resetForm();
     } catch (error) {
       if (error instanceof Error) {

packages/comment-widget/src/comment-item.ts

@@ -12,8 +12,9 @@ import { createRef, type Ref, ref } from 'lit/directives/ref.js';
 import { getPolicyInstance } from './avatar/avatar-policy';
 import type { CommentReplies } from './comment-replies';
 import { LS_UPVOTED_COMMENTS_KEY } from './constant';
-import { baseUrlContext, withRepliesContext } from './context';
+import { baseUrlContext, configMapDataContext } from './context';
 import varStyles from './styles/var';
+import type { ConfigMapData } from './types';
 
 export class CommentItem extends LitElement {
   @consume({ context: baseUrlContext })
@@ -23,9 +24,9 @@ export class CommentItem extends LitElement {
   @property({ type: Object })
   comment: CommentVo | undefined;
 
-  @consume({ context: withRepliesContext, subscribe: true })
+  @consume({ context: configMapDataContext })
   @state()
-  withReplies = false;
+  configMapData: ConfigMapData | undefined;
 
   @state()
   showReplies = false;
@@ -45,7 +46,7 @@ export class CommentItem extends LitElement {
     super.connectedCallback();
     this.checkUpvotedStatus();
 
-    if (this.withReplies) {
+    if (this.configMapData?.basic.withReplies) {
       this.showReplies = true;
       this.showReplyForm = false;
     }
@@ -100,7 +101,7 @@ export class CommentItem extends LitElement {
   handleShowReplies() {
     this.showReplies = !this.showReplies;
 
-    if (!this.withReplies) {
+    if (!this.configMapData?.basic.withReplies) {
       this.showReplyForm = !this.showReplyForm;
     }
   }
@@ -138,7 +139,12 @@ export class CommentItem extends LitElement {
               height="32"
               viewBox="0 0 24 24"
             >
-              <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+              <g
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              >
                 <path d="M0 0h24v24H0z" />
                 <path
                   fill="red"
@@ -166,7 +172,8 @@ export class CommentItem extends LitElement {
       </base-comment-item-action>
 
       ${
-        this.withReplies && this.comment?.status?.visibleReplyCount === 0
+        this.configMapData?.basic.withReplies &&
+        this.comment?.status?.visibleReplyCount === 0
           ? ''
           : html`<base-comment-item-action
             slot="action"
@@ -192,7 +199,7 @@ export class CommentItem extends LitElement {
           </base-comment-item-action>`
       }
       ${
-        this.withReplies
+        this.configMapData?.basic.withReplies
           ? html` <base-comment-item-action
             slot="action"
             .text=${this.showReplyForm ? msg('Cancel reply') : msg('Add reply')}
@@ -222,7 +229,10 @@ export class CommentItem extends LitElement {
         ${
           this.showReplyForm
             ? html`<div class="item__reply-form">
-              <reply-form @reload=${this.onReplyCreated} .comment=${this.comment}></reply-form>
+              <reply-form
+                @reload=${this.onReplyCreated}
+                .comment=${this.comment}
+              ></reply-form>
             </div>`
             : ''
         }