@salesforcedevs/docs-components 1.17.0-hack-alpha8 → 1.17.2-accessfix-alpha

package/src/modules/doc/commentPopup/commentPopup.ts

@@ -1,565 +0,0 @@
-import { LightningElement, api, track } from "lwc";
-import { normalizeBoolean } from "dxUtils/normalizers";
-
-interface Comment {
-    email: string;
-    comment_text: string;
-    timestamp: string;
-}
-
-interface ApiCommentPayload {
-    branch: string;
-    file_path: string;
-    heading_title: string;
-    start_line: string;
-    end_line: string;
-    comment: {
-        comment_text: string;
-        email: string;
-        timestamp: string;
-    };
-}
-
-interface ApiCommentResponse {
-    request_branch: string;
-    paths: Array<{
-        path: string;
-        titles: Array<{
-            title: string;
-            comments: Comment[];
-        }>;
-    }>;
-}
-
-// Local storage key for comments
-const COMMENTS_STORAGE_KEY = "dsc_comments";
-const API_URL = "https://cx-helper-engine-2-356c8dd6c7cc.herokuapp.com";
-
-export default class CommentPopup extends LightningElement {
-    iconSymbol = "chat";
-    iconSize = "medium";
-    popupTitle = "Leave a Comment";
-    submitButtonLabel = "Post Comment";
-    emailPlaceholder = "Enter your email";
-    commentPlaceholder = "Enter your comment";
-
-    private _headingTitle?: string;
-    private _filePath?: string;
-    private _startLine?: string;
-    private _endLine?: string;
-    private _currentBranch?: string;
-
-    @api get headingTitle() {
-        return this._headingTitle;
-    }
-    set headingTitle(value) {
-        this._headingTitle = value;
-        this.handlePropertyChange();
-    }
-
-    @api get filePath() {
-        return this._filePath;
-    }
-    set filePath(value) {
-        this._filePath = value;
-        this.handlePropertyChange();
-    }
-
-    @api get startLine() {
-        return this._startLine;
-    }
-    set startLine(value) {
-        this._startLine = value;
-    }
-
-    @api get endLine() {
-        return this._endLine;
-    }
-    set endLine(value) {
-        this._endLine = value;
-    }
-
-    @api get currentBranch() {
-        return this._currentBranch;
-    }
-    set currentBranch(value) {
-        this._currentBranch = value;
-        this.handlePropertyChange();
-    }
-
-    private _open = false;
-    @api get open() {
-        return this._open;
-    }
-    set open(value) {
-        this._open = normalizeBoolean(value);
-    }
-
-    @track private comments: Comment[] = [];
-    @track private email = "";
-    @track private comment = "";
-    @track private emailError = "";
-    @track private commentError = "";
-    @track private isSubmitting = false;
-    @track private isLoading = false;
-    @track private apiError = "";
-    @track private submitSuccess = false;
-
-    get showComments() {
-        return this.comments.length > 0;
-    }
-
-    get commentCount() {
-        return this.comments.length;
-    }
-
-    get showCommentCount() {
-        return this.commentCount > 0;
-    }
-
-    get sortedComments() {
-        return [...this.comments].sort(
-            (a, b) =>
-                new Date(b.timestamp).getTime() -
-                new Date(a.timestamp).getTime()
-        );
-    }
-
-    get isFormValid() {
-        return this.email.trim() !== "" && this.comment.trim() !== "";
-    }
-
-    get submitButtonDisabled() {
-        return !this.isFormValid || this.isSubmitting;
-    }
-
-    handleIconClick() {
-        this._open = !this._open;
-        // Comments are already loaded when component is connected, no need to fetch again
-    }
-
-    private handlePropertyChange() {
-        // Only fetch comments if component has required properties
-        if (this._currentBranch && this._filePath && this._headingTitle) {
-            this.fetchComments();
-        }
-    }
-
-    handleEmailChange(event: Event) {
-        this.email = (event.target as HTMLInputElement).value;
-        this.emailError = "";
-        this.apiError = "";
-        this.submitSuccess = false;
-    }
-
-    handleCommentChange(event: Event) {
-        this.comment = (event.target as HTMLTextAreaElement).value;
-        this.commentError = "";
-        this.apiError = "";
-        this.submitSuccess = false;
-    }
-
-    async handleSubmit() {
-        if (!this.validateForm()) {
-            return;
-        }
-
-        this.isSubmitting = true;
-        this.apiError = "";
-        this.submitSuccess = false;
-
-        try {
-            await this.addComment();
-            this.resetForm();
-            this.submitSuccess = true;
-
-            // Auto-hide success message after 3 seconds
-            setTimeout(() => {
-                this.submitSuccess = false;
-            }, 3000);
-        } catch (error) {
-            console.error("Error submitting comment:", error);
-            this.apiError = "Failed to post comment. Please try again.";
-        } finally {
-            this.isSubmitting = false;
-        }
-    }
-
-    private validateForm(): boolean {
-        let isValid = true;
-
-        if (!this.email.trim()) {
-            this.emailError = "Email is required";
-            isValid = false;
-        } else if (!this.isValidEmail(this.email)) {
-            this.emailError = "Please enter a valid email address";
-            isValid = false;
-        }
-
-        if (!this.comment.trim()) {
-            this.commentError = "Comment is required";
-            isValid = false;
-        }
-
-        return isValid;
-    }
-
-    private isValidEmail(email: string): boolean {
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        return emailRegex.test(email);
-    }
-
-    private async addComment() {
-        // Validate required fields before creating payload
-        if (!this._currentBranch || !this._filePath || !this._headingTitle) {
-            throw new Error(
-                "Missing required fields: branch, file_path, or heading_title"
-            );
-        }
-
-        const payload: ApiCommentPayload = {
-            branch: this._currentBranch,
-            file_path: this._filePath,
-            heading_title: this._headingTitle,
-            start_line: this._startLine || "",
-            end_line: this._endLine || "",
-            comment: {
-                comment_text: this.comment.trim(),
-                email: this.email.trim(),
-                timestamp: new Date().toISOString()
-            }
-        };
-
-        console.log(
-            "Posting comment with payload:",
-            JSON.stringify(payload, null, 2)
-        );
-
-        // Try API first, fallback to localStorage
-        try {
-            const response = await fetch(`${API_URL}/post-comment`, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json"
-                },
-                body: JSON.stringify(payload)
-            });
-
-            if (response.ok) {
-                const responseData = await response.json();
-                console.log(
-                    "Comment posted successfully via API:",
-                    responseData
-                );
-
-                // Refresh comments after successful post
-                await this.fetchComments();
-
-                // Dispatch custom event
-                this.dispatchEvent(
-                    new CustomEvent("commentadded", {
-                        detail: {
-                            ...payload.comment,
-                            id: responseData.id // Include any ID returned by the API
-                        }
-                    })
-                );
-            } else {
-                console.warn(
-                    `API call failed (${response.status}): ${response.statusText}, falling back to localStorage`
-                );
-                // Fallback to localStorage if API fails
-                await this.saveCommentToLocalStorage(payload);
-                console.log(
-                    "Comment saved to local storage successfully (fallback)"
-                );
-
-                // Refresh comments after successful save
-                await this.fetchComments();
-
-                // Dispatch custom event
-                this.dispatchEvent(
-                    new CustomEvent("commentadded", {
-                        detail: {
-                            ...payload.comment,
-                            id: Date.now().toString() // Generate temporary ID
-                        }
-                    })
-                );
-            }
-        } catch (error) {
-            console.error(
-                "Error posting comment via API, falling back to localStorage:",
-                error
-            );
-            // Fallback to localStorage if API call throws an error
-            try {
-                await this.saveCommentToLocalStorage(payload);
-                console.log(
-                    "Comment saved to local storage successfully (fallback)"
-                );
-
-                // Refresh comments after successful save
-                await this.fetchComments();
-
-                // Dispatch custom event
-                this.dispatchEvent(
-                    new CustomEvent("commentadded", {
-                        detail: {
-                            ...payload.comment,
-                            id: Date.now().toString() // Generate temporary ID
-                        }
-                    })
-                );
-            } catch (localStorageError) {
-                console.error(
-                    "Error saving comment to local storage:",
-                    localStorageError
-                );
-                throw localStorageError;
-            }
-        }
-    }
-
-    private async saveCommentToLocalStorage(payload: ApiCommentPayload) {
-        try {
-            // Get existing comments from localStorage
-            const existingData = localStorage.getItem(COMMENTS_STORAGE_KEY);
-            const allComments = existingData ? JSON.parse(existingData) : {};
-
-            // Create a unique key for this specific comment location
-            const commentKey = `${payload.branch}_${payload.file_path}_${payload.heading_title}`;
-
-            // Initialize array for this location if it doesn't exist
-            if (!allComments[commentKey]) {
-                allComments[commentKey] = [];
-            }
-
-            // Add the new comment
-            allComments[commentKey].push(payload.comment);
-
-            // Save back to localStorage
-            localStorage.setItem(
-                COMMENTS_STORAGE_KEY,
-                JSON.stringify(allComments)
-            );
-
-            console.log("Comments saved to localStorage:", allComments);
-        } catch (error) {
-            console.error("Error saving to localStorage:", error);
-            throw new Error("Failed to save comment to local storage");
-        }
-    }
-
-    private resetForm() {
-        this.email = "";
-        this.comment = "";
-        this.emailError = "";
-        this.commentError = "";
-
-        // Force DOM update by accessing the form elements
-        const emailInput = this.template.querySelector(
-            "#email-input"
-        ) as HTMLInputElement;
-        const commentInput = this.template.querySelector(
-            "#comment-input"
-        ) as HTMLTextAreaElement;
-
-        if (emailInput) {
-            emailInput.value = "";
-        }
-        if (commentInput) {
-            commentInput.value = "";
-        }
-    }
-
-    handleClose() {
-        this._open = false;
-        this.resetForm();
-        this.apiError = "";
-        this.submitSuccess = false;
-    }
-
-    handleOverlayClick(event: Event) {
-        if (event.target === event.currentTarget) {
-            this.handleClose();
-        }
-    }
-
-    handleKeyDown(event: KeyboardEvent) {
-        if (event.key === "Escape") {
-            this.handleClose();
-        }
-    }
-
-    connectedCallback() {
-        document.addEventListener("keydown", this.handleKeyDown.bind(this));
-        // Fetch comments when component is connected
-        this.fetchComments();
-    }
-
-    private async fetchComments() {
-        if (!this._currentBranch || !this._filePath || !this._headingTitle) {
-            console.warn("Cannot fetch comments: missing required parameters");
-            return;
-        }
-
-        this.isLoading = true;
-        this.apiError = "";
-
-        try {
-            // API IMPLEMENTATION - Try to fetch from /get-comments endpoint
-            const params = new URLSearchParams({
-                branch: this._currentBranch
-            });
-
-            console.log("Fetching comments with params:", params.toString());
-
-            const response = await fetch(
-                `${API_URL}/get-comments?${params.toString()}`
-            );
-
-            if (response.ok) {
-                const data: ApiCommentResponse = await response.json();
-                console.log("Fetched comments from API:", data);
-
-                // Find comments for this specific file path and heading title
-                const comments = this.extractCommentsFromApiResponse(data);
-                this.comments = comments;
-            } else {
-                console.warn(
-                    `API call failed (${response.status}): ${response.statusText}, falling back to localStorage`
-                );
-                // Fallback to localStorage if API fails
-                const comments = await this.getCommentsFromLocalStorage();
-                console.log(
-                    "Fetched comments from localStorage (fallback):",
-                    comments
-                );
-                this.comments = comments;
-            }
-        } catch (error) {
-            console.error(
-                "Error fetching comments from API, falling back to localStorage:",
-                error
-            );
-            // Fallback to localStorage if API call throws an error
-            try {
-                const comments = await this.getCommentsFromLocalStorage();
-                console.log(
-                    "Fetched comments from localStorage (fallback):",
-                    comments
-                );
-                this.comments = comments;
-            } catch (localStorageError) {
-                console.error(
-                    "Error fetching comments from localStorage:",
-                    localStorageError
-                );
-                this.apiError =
-                    "Failed to load comments. Please try again later.";
-                this.comments = [];
-            }
-        } finally {
-            this.isLoading = false;
-        }
-    }
-
-    private extractCommentsFromApiResponse(
-        data: ApiCommentResponse
-    ): Comment[] {
-        try {
-            // Find the path that matches our file path
-            const matchingPath = data.paths.find(
-                (path) => path.path === this._filePath
-            );
-
-            if (!matchingPath) {
-                console.log(
-                    `No comments found for file path: ${this._filePath}`
-                );
-                return [];
-            }
-
-            // Find the title that matches our heading title
-            const matchingTitle = matchingPath.titles.find(
-                (title) => title.title === this._headingTitle
-            );
-
-            if (!matchingTitle) {
-                console.log(
-                    `No comments found for heading title: ${this._headingTitle}`
-                );
-                return [];
-            }
-
-            console.log(
-                `Found ${matchingTitle.comments.length} comments for ${this._filePath} - ${this._headingTitle}`
-            );
-            return matchingTitle.comments;
-        } catch (error) {
-            console.error(
-                "Error extracting comments from API response:",
-                error
-            );
-            return [];
-        }
-    }
-
-    private async getCommentsFromLocalStorage(): Promise<Comment[]> {
-        try {
-            const existingData = localStorage.getItem(COMMENTS_STORAGE_KEY);
-            if (!existingData) {
-                return [];
-            }
-
-            const allComments = JSON.parse(existingData);
-            const commentKey = `${this._currentBranch}_${this._filePath}_${this._headingTitle}`;
-
-            return allComments[commentKey] || [];
-        } catch (error) {
-            console.error("Error reading from localStorage:", error);
-            return [];
-        }
-    }
-
-    disconnectedCallback() {
-        document.removeEventListener("keydown", this.handleKeyDown.bind(this));
-    }
-
-    private formatTimestamp(timestamp: string): string {
-        const now = new Date();
-        const commentDate = new Date(timestamp);
-        const diff = now.getTime() - commentDate.getTime();
-        const minutes = Math.floor(diff / 60000);
-        const hours = Math.floor(diff / 3600000);
-        const days = Math.floor(diff / 86400000);
-
-        if (minutes < 1) {
-            return "Just now";
-        } else if (minutes < 60) {
-            return `${minutes} minute${minutes > 1 ? "s" : ""} ago`;
-        } else if (hours < 24) {
-            return `${hours} hour${hours > 1 ? "s" : ""} ago`;
-        }
-        return `${days} day${days > 1 ? "s" : ""} ago`;
-    }
-
-    get formattedComments() {
-        return this.sortedComments.map((comment) => ({
-            ...comment,
-            comment: comment.comment_text, // Map API field to template expectation
-            formattedTimestamp: this.formatTimestamp(comment.timestamp),
-            maskedEmail: this.maskEmail(comment.email)
-        }));
-    }
-
-    private maskEmail(email: string): string {
-        const [localPart, domain] = email.split("@");
-        const maskedLocal =
-            localPart.length > 2
-                ? localPart.substring(0, 2) + "*".repeat(localPart.length - 2)
-                : localPart;
-        return `${maskedLocal}@${domain}`;
-    }
-}