Fix frontend not respecting ADMIN_EDIT for comment editing

Add admin_edit field to frontend Config types and use it in
comment component to give admins unlimited edit time and allow
editing comments with replies. Hide countdown timer when
editDeadline is Infinity. Fixes #1986

frontend/apps/remark42/app/__stubs__/static-config.ts

@@ -8,6 +8,7 @@ beforeEach(() => {
     critical_score: -15,
     low_score: -5,
     edit_duration: 300,
+    admin_edit: false,
     max_comment_size: 3000,
     max_image_size: 5000,
     positive_score: false,

frontend/apps/remark42/app/common/static-store.ts

@@ -15,6 +15,7 @@ export const StaticStore: StaticStoreType = {
   config: {
     version: '',
     edit_duration: 5000,
+    admin_edit: false,
     max_comment_size: 5000,
     admins: [],
     admin_email: '',

frontend/apps/remark42/app/common/types.ts

@@ -109,6 +109,7 @@ export interface Config {
   version: string;
   auth_providers: Provider[];
   edit_duration: number;
+  admin_edit: boolean;
   max_comment_size: number;
   admins: string[];
   admin_email: string;

frontend/apps/remark42/app/components/comment/comment-actions.tsx

@@ -73,13 +73,15 @@ export function CommentActions({
           <Button kind="link" size="sm" onClick={onToggleEditing}>
             {intl.formatMessage(editing ? messages.cancel : messages.edit)}
           </Button>
-          <span
-            role="timer"
-            title={intl.formatMessage(messages.editCountdown)}
-            className={clsx('comment-actions-countdown', styles.countdown)}
-          >
-            <Countdown timestamp={editDeadline} onTimePassed={onDisableEditing} />
-          </span>
+          {Number.isFinite(editDeadline) && (
+            <span
+              role="timer"
+              title={intl.formatMessage(messages.editCountdown)}
+              className={clsx('comment-actions-countdown', styles.countdown)}
+            >
+              <Countdown timestamp={editDeadline} onTimePassed={onDisableEditing} />
+            </span>
+          )}
         </>
       )}
       <div

frontend/apps/remark42/app/components/comment/comment.tsx

@@ -102,11 +102,15 @@ export class Comment extends Component<CommentProps, State> {
 
     // set comment edit timer
     if (this.isCurrentUser()) {
-      const editDuration = StaticStore.config.edit_duration;
-      const timeDiff = StaticStore.serverClientTimeDiff || 0;
-      const editDeadline = new Date(props.data.time).getTime() + timeDiff + editDuration * 1000;
+      if (this.isAdmin() && StaticStore.config.admin_edit) {
+        newState.editDeadline = Infinity;
+      } else {
+        const editDuration = StaticStore.config.edit_duration;
+        const timeDiff = StaticStore.serverClientTimeDiff || 0;
+        const editDeadline = new Date(props.data.time).getTime() + timeDiff + editDuration * 1000;
 
-      newState.editDeadline = editDeadline > Date.now() ? editDeadline : undefined;
+        newState.editDeadline = editDeadline > Date.now() ? editDeadline : undefined;
+      }
     }
 
     return newState;
@@ -488,7 +492,10 @@ export class Comment extends Component<CommentProps, State> {
               copied={state.isCopied}
               editing={isEditing}
               replying={isReplying}
-              editable={props.repliesCount === 0 && state.editDeadline !== undefined}
+              editable={
+                state.editDeadline !== undefined &&
+                (props.repliesCount === 0 || (isAdmin && StaticStore.config.admin_edit))
+              }
               editDeadline={state.editDeadline}
               readOnly={props.post_info?.read_only}
               onToggleReplying={this.toggleReplying}

frontend/packages/api/clients/public.ts

@@ -6,6 +6,7 @@ export interface Config {
 	version: string
 	auth_providers: Provider[]
 	edit_duration: number
+	admin_edit: boolean
 	max_comment_size: number
 	admins: string[]
 	admin_email: string
@@ -103,7 +104,7 @@ export function createPublicClient({ siteId: site, baseUrl }: ClientParams) {
 	async function getComments(url: string): Promise<CommentsTree>
 	async function getComments(params: GetUserCommentsParams): Promise<Comment[]>
 	async function getComments(
-		params: string | GetUserCommentsParams
+		params: string | GetUserCommentsParams,
 	): Promise<Comment[] | CommentsTree> {
 		if (typeof params === 'string') {
 			return fetcher.get('/comments', { url: params })