Skip to content

Add Channel Analysis UI Strategy Document #171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 19, 2025
Merged

Add Channel Analysis UI Strategy Document #171

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
274 changes: 208 additions & 66 deletions frontend/src/components/slack/important_logs.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,208 @@
# OAuth Flow Debugging Logs

## OAuth Flow Issues

1. Client ID and Client Secret not being properly passed through the OAuth flow
- ConnectWorkspace component now saves these in sessionStorage
- OAuthCallback component retrieves them during the OAuth flow

2. Team ID not available at the time of OAuth callback
- Added logic to wait for team context to load before proceeding
- Added timeout to prevent indefinite loading

3. Slack API Client URL Formation
- Fixed base URL path in SlackApiClient to properly handle team-scoped integrations
- Added proper error handling for API responses

## API Response Conversion

1. Backend failing to properly convert SQLAlchemy models to Pydantic schemas
- Added conversion functions for ServiceResource, IntegrationShare, and ResourceAccess
- Updated error handling for null responses

2. Resource Sync Button
- Fixed issues with the sync resources button not working properly
- Added proper URL formation in the API client

## Team-Based Integration Model

1. Transitioning from legacy Slack integration to team-based model
- Each team now has its own integration
- OAuth callback requires team context
- Client credentials collected on a per-team basis instead of environment variables

## Error Debugging (April 15-18)

1. Authorization Error (April 17):
- Error: Failed to complete OAuth handshake with Slack
- Status: 400
- Details: Invalid client_secret parameter
- Resolution: Fixed parameter passing from frontend to backend

2. OAuth Token Expiration (April 17):
- Error: Failed to fetch channel list
- Status: 401
- Details: Token expired or revoked
- Resolution: Added reconnection flow in IntegrationDetail component

3. URL Construction Issue (April 15):
- Error: Duplicate path segment in URL
- URL: https://api.example.com/api/slack/slack/oauth-callback
- Fixed URL: https://api.example.com/api/slack/oauth-callback

4. Reconnection Error (April 18):
- Error: Failed to reconnect Slack workspace
- Status: 409
- Details: Workspace already connected to team "Engineering"
- WorkspaceID: W0123456789
- AttemptedTeamID: team_67890
- Resolution: Need to implement uniqueness constraints

## Next Steps

1. Implement uniqueness constraints for (team_id, slack_workspace_id)
2. Create detailed API and UI implementation plans
3. Add proper error handling for duplicate workspace connections
4. Implement reconnection flow for expired or revoked tokens
# Strategy for Integrating "Select Channels for Analysis" UI into Team-Based Integration

## Overview
This document outlines a strategy for implementing the "Select Channels for Analysis" functionality within the team-based integration model, leveraging existing components from the legacy Slack implementation while maintaining proper team context.

## Current State Analysis

### Legacy Implementation
The current "Select Channels for Analysis" functionality is implemented in:
- `frontend/src/components/slack/ChannelList.tsx`: The main component for channel selection
- `frontend/src/pages/slack/ChannelAnalysisPage.tsx`: The page for running channel analysis

Key features of the legacy implementation:
1. Fetches channels from Slack workspace
2. Provides UI for filtering and selecting channels (pagination, search, type filters)
3. Marks channels for analysis
4. Manages bot installation status for selected channels
5. Synchronizes channel data with Slack API

### Team-Based Integration Model
The new team-based integration model uses:
- `frontend/src/components/integration/IntegrationDetail.tsx`: Main component for viewing integration details
- `frontend/src/components/integration/ResourceList.tsx`: Component for displaying integration resources (channels, users)

The team-based model currently:
1. Displays integration details and status
2. Shows resources as a simple list without selection functionality
3. Provides a "Sync Resources" action to update resources
4. Uses React context for integration data management (`useIntegration`)

## Technical Requirements

1. Enable selection of specific channels for analysis within a team-owned Slack integration
2. Maintain team context throughout the channel selection and analysis process
3. Support channel filtering and search functionality
4. Handle bot installation status for selected channels
5. Ensure proper synchronization with Slack API
6. Manage transitions between different UI states (loading, error, success)
7. Implement proper pagination and sorting
8. Preserve existing integration management features

## Implementation Strategy

### 1. Create new components for channel selection within team context

#### A. New Component: `TeamChannelSelector`
Create a new component specifically for selecting channels within a team-owned integration:

```
frontend/src/components/integration/TeamChannelSelector.tsx
```

This component will:
- Be based on the existing `ChannelList` component
- Accept team context and integration ID as props
- Use the integration context for data fetching and state management
- Show only channels from the specific team-owned integration
- Maintain the same filtering and search capabilities
- Connect to team-scoped API endpoints

#### B. New Component: `ChannelAnalysisSettings`
Create a component for configuring analysis parameters:

```
frontend/src/components/integration/ChannelAnalysisSettings.tsx
```

This will:
- Provide date range selection
- Toggle options (include threads, include reactions)
- Similar to the form section in the existing `ChannelAnalysisPage`

#### C. New Page: `TeamChannelAnalysisPage`
Create a new page for running analysis within team context:

```
frontend/src/pages/integration/TeamChannelAnalysisPage.tsx
```

This will:
- Be similar to the existing `ChannelAnalysisPage`
- Maintain team context
- Use team-scoped API endpoints

### 2. Extend the Integration Context

Update `IntegrationContext.tsx` and `integrationService.ts` to include:

- Channel selection state management
- Methods for selecting/deselecting channels for analysis
- Methods for running analysis on selected channels
- Methods for fetching analysis results

Example additions:
```typescript
// New methods for IntegrationContext
const selectChannelsForAnalysis = async (
integrationId: string,
channelIds: string[]
): Promise<boolean> => {
// Implementation
}

const analyzeChannel = async (
integrationId: string,
channelId: string,
options: AnalysisOptions
): Promise<AnalysisResult> => {
// Implementation
}
```

### 3. Enhance the backend API endpoints

Extend the team-based integration API to support:
- Marking channels for analysis within team context
- Running analysis on selected channels
- Managing bot installation for selected channels
- Retrieving analysis results with proper team scoping

Example endpoints:
```
POST /api/v1/integrations/{integrationId}/resources/channels/select
POST /api/v1/integrations/{integrationId}/resources/channels/{channelId}/analyze
GET /api/v1/integrations/{integrationId}/resources/channels/{channelId}/analysis/{analysisId}
```

### 4. Update the routing and navigation

Enhance the application routing to include:
- Path to channel selection for team integrations
- Path to channel analysis for team integrations
- Proper navigation between these views

Example routes:
```typescript
<Route path="/dashboard/integrations/:integrationId/channels" element={<TeamChannelSelectorPage />} />
<Route path="/dashboard/integrations/:integrationId/channels/:channelId/analyze" element={<TeamChannelAnalysisPage />} />
<Route path="/dashboard/integrations/:integrationId/channels/:channelId/analysis/:analysisId" element={<TeamAnalysisResultPage />} />
```

### 5. Enhance the UI for resource management

Update `IntegrationDetail.tsx` and `ResourceList.tsx` to:
- Add action buttons for channel selection and analysis
- Provide visual indicators for channels marked for analysis
- Include proper navigation to channel selection and analysis pages

### 6. Data Migration and Backward Compatibility

Consider:
- Migrating existing channel selection data to the team-based model
- Maintaining backward compatibility with existing analysis results
- Providing a smooth transition path for users

## Implementation Phases

### Phase 1: Core Components and Structure
1. Create the `TeamChannelSelector` component (simplified version)
2. Enhance integration context with basic channel selection functionality
3. Update `ResourceList` to include action buttons for channel management
4. Implement basic routing for new channel selection views

### Phase 2: Complete UI Implementation
1. Enhance `TeamChannelSelector` with full filtering and search capabilities
2. Create the `ChannelAnalysisSettings` component
3. Implement `TeamChannelAnalysisPage` for running analysis
4. Update navigation and links throughout the application

### Phase 3: API Integration and Data Flow
1. Connect UI components to backend API endpoints
2. Implement proper error handling and loading states
3. Add data validation and synchronization
4. Test the complete flow from selection to analysis

### Phase 4: Refinement and Optimization
1. Improve performance for large channel lists
2. Enhance UX for channel selection process
3. Add additional features like bulk selection
4. Implement proper documentation and user guidance

## Technical Considerations

### State Management
- Use React context for managing integration and channel selection state
- Consider using reducers for complex state transitions
- Implement proper caching for channel data

### Performance
- Optimize for large channel lists with pagination and virtualization
- Implement efficient filtering and searching on the client side
- Consider using web workers for heavy computations

### Security
- Ensure proper team scoping for all API requests
- Validate permissions for channel access and analysis
- Implement proper error handling for unauthorized actions

### UX Considerations
- Maintain consistent UI patterns with existing components
- Provide clear feedback during long-running operations
- Implement progressive loading for large data sets

## Conclusion

This strategy provides a comprehensive approach to implementing the "Select Channels for Analysis" functionality within the team-based integration model. By leveraging existing components from the legacy implementation while enhancing them with team context awareness, we can provide a seamless experience for users transitioning to the new model.

The phased implementation approach allows for incremental development and testing, ensuring that each component functions correctly before moving on to the next phase.
Loading