Frontend Overview

The frontend components for MS Word Integration provide the user interface for initiating external editing sessions, managing templates, and handling file uploads from Microsoft Word.

Key Components

EditReportInWord Component

Location: src/components/reusable/Modals/Report/EditReportInWord.tsx

Purpose: Main component for Word editing functionality

Features:

• Session status display
• Authorship management
• File preview (PDF)
• Error handling

State Management:

interface EditReportInWordState {
  currentEditedReport: ExternalReportEdit | {};
  spinner: boolean;
  isButtonClicked: boolean;
}

Template Management Components

Location: src/components/reusable/TemplateAndSnippetManagement/

Components:

• CreateOrUpdateTemplateAndSnippet: Template creation interface
• UploadWordTemplate: DOCX file upload component
• TemplateSelector: Template selection dropdown

User Interface Flow

1. Template Selection

UI Elements:

• Template dropdown in report modal
• Upload new template option
• Template preview (optional)

Validation:

• File type checking (.docx only)
• Size limits (50MB)
• Template structure validation

2. Edit Session Initiation

UI Elements:

• "Edit in Microsoft Word" button
• Loading spinner during processing
• Error messages for failures

User Feedback:

• Button text changes to "Opening in Word"
• Tooltip with system requirements
• Session status indicators

3. Session Management

UI Elements:

• Current author display
• Last updated timestamp
• "Take Authorship" button
• PDF preview

Real-time Updates:

• WebSocket integration for session changes
• Automatic UI refresh on status changes

Protocol Handler Integration

Winword Protocol

Implementation:

const encodedUri = encodeURIComponent(
  `//${response.data.auth_token}^${response.data.edit_id}^${presignedUrl}`
);
openTab(`winword:${encodedUri}`, "_blank");

URL Structure:

winword://auth_token^edit_id^presigned_s3_url

Browser Compatibility:

• Chrome: Direct protocol handler support
• Firefox: Requires protocol handler configuration
• Edge: Native support

File Upload Handling

Automatic Upload

Trigger: First save in Microsoft Word

Process:

1. Word extension/plugin captures save event
2. Files uploaded via FormData to API endpoint
3. Progress indication in UI
4. Success/failure feedback

Manual Upload (Fallback)

UI Elements:

• File input for DOCX
• File input for PDF
• Upload progress bar
• Error display

Error Handling

User-Friendly Messages

Common Errors:

• "Microsoft Word must be installed and configured"
• "Select the appropriate template to edit in word"
• "Failed to fetch existing report"

Recovery Actions:

• Retry buttons for transient failures
• Alternative upload methods
• Support contact information

Accessibility

Keyboard Navigation

• Tab order through all interactive elements
• Keyboard shortcuts for common actions
• Screen reader support for status messages

Visual Indicators

• Loading states with spinners
• Error states with red highlighting
• Success states with green confirmation

Performance Optimization

Lazy Loading

• Components loaded on demand
• Template list virtualization for large sets
• Image/PDF preview lazy loading

Caching Strategy

• Template metadata cached for session
• User preferences stored locally
• Recent templates prioritized

Mobile Considerations

Responsive Design

• Tablet support for template management
• Touch-friendly buttons and inputs
• Optimized layouts for smaller screens

Limitations

• Word editing requires desktop application
• File uploads work on mobile browsers
• Protocol handlers limited on mobile