Skip to content

Latest commit

 

History

History
90 lines (59 loc) · 3.53 KB

github-integration-fix-plan.md

File metadata and controls

90 lines (59 loc) · 3.53 KB

GitHub Integration Fix Plan

Issue Description

The user reports that "the github stuff isn't showing under the upload or canvas sections anymore." This indicates that the GitHub repository browser functionality, which was previously visible in the application, is no longer appearing where expected.

Current Implementation Analysis

Based on the code review, here's how the GitHub integration is currently implemented:

  1. The GitHubRepoBrowser component (in src/components/GitHubRepoBrowser/GitHubRepoBrowser.tsx) provides the GitHub browsing functionality.

  2. In App.tsx, the component is conditionally rendered in two scenarios:

    • It should appear below the canvas when a template is loaded AND showBrowser state is true (lines 149-153)
    • However, it's not shown alongside the FileUpload component in the initial view (when no template is loaded)

  3. The showBrowser state is initialized to true by default (line 21 in App.tsx), but there's no GitHub browser shown in the initial upload view.

Potential Causes

  1. Missing Initial Integration: The GitHub browser was likely previously shown alongside the FileUpload component, but this integration is now missing.

  2. Conditional Rendering Issue: The conditions for showing the GitHub browser may have changed or are not being met.

  3. CSS/Layout Issue: The component might be rendered but hidden due to CSS or layout issues.

Solution Plan

1. Update App.tsx to Show GitHub Browser in Both Views

Modify the App.tsx file to:

  • Add the GitHubRepoBrowser component to the initial view (when no template is loaded)
  • Ensure the GitHubRepoBrowser is properly displayed when a template is loaded

Specifically, we need to update the layout in the initial view (lines 108-116) to include the GitHubRepoBrowser component below the FileUpload component.

2. Implementation Steps

  1. Modify the Initial View Layout:

    • Update the grid layout to accommodate both components
    • Add the GitHubRepoBrowser component below the FileUpload component

  2. Ensure Proper State Management:

    • Verify the showBrowser state is properly initialized and toggled
    • Add a toggle button in the initial view if needed

  3. Test the Integration:

    • Verify the GitHub browser appears in both views
    • Test the workflow loading functionality from GitHub

3. Code Changes Required

The main change will be in App.tsx, specifically in the section where the initial view is rendered (lines 108-116). We'll need to:

{
  /* Top: File upload when no template is loaded */
}
{
  !template && (
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
      <div className="lg:col-span-12 space-y-8">
        {/* File Upload Component */}
        <div className="bg-[hsl(var(--card))] rounded-lg shadow-lg">
          <FileUpload onFileUpload={handleFileUpload} />
        </div>

        {/* GitHub Browser Component - Add this section */}
        <div className="bg-[hsl(var(--card))] rounded-lg shadow-lg">
          <GitHubRepoBrowser onWorkflowSelect={handleFileUpload} />
        </div>
      </div>
    </div>
  );
}

Expected Outcome

After implementing these changes:

  1. The GitHub browser will be visible below the file upload component when no template is loaded
  2. The GitHub browser will continue to be visible below the canvas when a template is loaded (if showBrowser is true)
  3. Users will be able to browse and load workflows from GitHub repositories in both views

This solution restores the GitHub integration functionality that was previously available in the application.