Update workspace view to add a CodeGraph Component that mirrors functionality of the Repo Component

[humansinstitute]

Description

Create TypeScript interfaces and React components for managing WorkspaceCodeGraph, following existing patterns from repository management. Then integrate into the workspace view below the repository section.

Part 1: Core Implementation

1. Type Definitions

// src/types/workspace.ts
export interface WorkspaceCodeGraph {
  uuid: string;
  workspace_uuid: string;
  name: string;
  url: string;
  created?: string;
  updated?: string;
  created_by?: string;
  updated_by?: string;
}

// Store method types
export interface WorkspaceStore {
  // ... existing types ...
  createCodeGraph: (data: WorkspaceCodeGraph) => Promise<void>;
  updateCodeGraph: (data: WorkspaceCodeGraph) => Promise<void>;
  deleteCodeGraph: (workspace_uuid: string) => Promise<void>;
  getCodeGraph: (workspace_uuid: string) => Promise<WorkspaceCodeGraph>;
}

2. Store Integration

// Add to main store
createCodeGraph: async (data: WorkspaceCodeGraph) => {
  return api.post(`/${data.workspace_uuid}/codegraph`, data);
},

updateCodeGraph: async (data: WorkspaceCodeGraph) => {
  return api.post(`/${data.workspace_uuid}/codegraph`, data);
},

deleteCodeGraph: async (workspace_uuid: string) => {
  return api.delete(`/${workspace_uuid}/codegraph`);
},

getCodeGraph: async (workspace_uuid: string) => {
  return api.get(`/${workspace_uuid}/codegraph`);
}

3. Component Implementation

Create AddCodeGraphModal component with:

• Form fields for name and URL
• Validation and error handling
• Loading states
• Success/error toasts
• TypeScript props and state typing
• Integration with store methods

Part 2: Workspace View Integration

1. Update Workspace View

Note when there is no code graph. Represent only the title and the add button.

Add new section below repositories:

// src/people/widgetViews/workspace/WorkspaceView.tsx
const WorkspaceView: React.FC = () => {
  // ... existing code ...

  return (
    <>
      {/* Existing repository section */}
      <RepositoriesSection>
        {/* ... existing repository content ... */}
      </RepositoriesSection>

      {/* New code graph section */}
      <CodeGraphSection>
        <SectionHeader>
          <h3>Code Graph</h3>
          {!codeGraph && (
            <ActionButton onClick={handleAddCodeGraph}>
              Add Code Graph
            </ActionButton>
          )}
        </SectionHeader>
        
        {codeGraph && (
          <CodeGraphDisplay
            data={codeGraph}
            onEdit={handleEditCodeGraph}
            onDelete={handleDeleteCodeGraph}
          />
        )}
      </CodeGraphSection>
    </>
  );
};

2. Add Modal Management

const [isCodeGraphModalOpen, setCodeGraphModalOpen] = useState(false);
const [codeGraph, setCodeGraph] = useState<WorkspaceCodeGraph | null>(null);
const [modalType, setModalType] = useState<'add' | 'edit'>('add');

const handleAddCodeGraph = () => {
  setModalType('add');
  setCodeGraphModalOpen(true);
};

const handleEditCodeGraph = () => {
  setModalType('edit');
  setCodeGraphModalOpen(true);
};

Task List

1. Create TypeScript interfaces for WorkspaceCodeGraph
2. Add store methods for API integration
3. Create AddCodeGraphModal component
4. Create CodeGraphDisplay component
5. Update WorkspaceView to include code graph section
6. Add modal management logic
7. Style new components
8. Implement loading states
9. Add error handling
10. Test integration

Design Notes

• Code graph section should visually match repository section
• Only one code graph per workspace
• Add button only shows when no code graph exists
• Edit/Delete options available when code graph exists
• Maintain consistent spacing with repository section

Acceptance Criteria

• Types are properly defined and used throughout
• Store methods correctly interact with API endpoints
• Add/Edit/Delete operations work correctly
• Code graph section appears below repositories with UI matches existing workspace styling
• Error handling shows appropriate messages

[MuhammadUmer44]

@humansinstitute Please assign me?

[Shoaibdev7]

@humansinstitute I can help?

[AhsanFarooqDev]

@humansinstitute can i help?