Connections Screen Refactor

1. Overview

The goal of this project is to re-enable the Connections screen in the web application. This involves removing the existing Redux and RTK Query implementation for managing connections and replacing it with @tanstack/react-query for data fetching and state management. This will align the connections feature with the latest development patterns used in other parts of the application, such as for Grids.

2. Project Phases and Tasks

The project is broken down into the following phases and tasks to ensure a smooth transition and incremental development.

Phase 1: Implement React Query Hooks for Connections API

First, we will create a set of reusable React Query hooks to interact with the connections API.

• Task 1.1: Create connectionQueries.ts

  • Create a new file at apps/web-app/src/queries/connectionQueries.ts to house all connection-related queries and mutations.

• Task 1.2: Implement Query Hooks

  • useGetConnections: A hook to fetch all connections for a given workspaceId. It will call the GET /jwt/connections endpoint.
  • useGetConnection: A hook to fetch the details of a single connection by its connectionId. It will call the GET /jwt/connections/:id endpoint.

• Task 1.3: Implement Mutation Hooks

  • useCreateConnection: A mutation hook for creating new connections via POST /jwt/connections. It should invalidate the useGetConnections query on success.
  • useUpdateConnection: A mutation hook for updating connections via PUT /jwt/connections/:id. It should invalidate both useGetConnections and the relevant useGetConnection queries on success.
  • useDeleteConnection: A mutation hook for deleting connections via DELETE /jwt/connections/:id. It should invalidate the useGetConnections query on success.

Phase 2: Refactor UI Components

With the new data hooks in place, we can update the UI components to use them.

• Task 2.1: Re-enable and Refactor Connection Routes

  • Uncomment the routes in apps/web-app/src/routes/ConnectionsRoutes.tsx.
  • Remove the ConnectionReduxHandler component wrapper.

• Task 2.2: Refactor ConnectionsLeftNav.tsx

  • Uncomment the code in apps/web-app/src/components/ConnectionsLeftNav/ConnectionsLeftNav.tsx.
  • Replace the useGetConnectionsQuery from RTK Query with our new useGetConnections hook.
  • Update the component to correctly handle isLoading, isError, and data states from the React Query hook.

• Task 2.3: Refactor ConnectionDetails.tsx

  • Update the ConnectionDetails component to fetch connection data using useGetConnection when a connectionId is present in the URL.
  • For creating new connections, the component should not fetch any initial data.
  • Use the useCreateConnection and useUpdateConnection mutation hooks for handling form submissions.
  • Manage form state locally within the component using useState or a form library like react-hook-form, replacing the reliance on the old Redux slice.

• Task 2.4: Refactor ConnectionMainContent.tsx

  • Review and refactor apps/web-app/src/components/ConnectionMainContent/ConnectionMainContent.tsx.
  • Update it to use the new React Query hooks for any data it needs to display or modify, depending on the currently selected connection.

Phase 3: UI Migration from Material-UI to shadcn/ui

After refactoring the component logic to use React Query, the next step is to update the UI from Material-UI to match the application’s design system based on shadcn/ui and Tailwind CSS.

• Task 3.1: Refactor ConnectionCard.tsx

  • Replace the custom MUI-based Card with the Card component from shadcn/ui.
  • Replace the MUI Menu, MenuItem, MenuList, and IconButton with the DropdownMenu and Button components from shadcn/ui, following the pattern in GridCard.
  • Replace MUI icons (e.g., EditIcon, DeleteIcon, MoreHorizIcon) with suitable alternatives from the lucide-react library.
  • Remove MUI layout components (Stack, Box) in favor of standard div elements with Tailwind CSS utility classes for layout.
  • Replace MUI Typography with standard h3, p, or span tags styled with Tailwind’s typography classes.

• Task 3.2: Refactor ConnectionsLeftNav.tsx

  • Replace the MUI Stack layout with div elements using Tailwind CSS flexbox or grid utilities.
  • Migrate CreateConnectionDialog to use the Dialog component from shadcn/ui. This includes replacing any MUI form elements within it.
  • Replace the MUI GoogleIcon with an appropriate SVG or a similar icon from lucide-react.

• Task 3.3: Refactor ConnectionDetails.tsx

  • Replace the MUI SidePanel’s internal layout (Stack) with divs and Tailwind CSS classes.
  • Replace the MUI TextField with the shadcn/ui Input and Label components.
  • Replace the MUI Divider with the Separator component from shadcn/ui.
  • Replace all instances of MUI Typography with standard text elements styled with Tailwind CSS.

• Task 3.4: Refactor ConnectionMainContent.tsx

  • Replace MUI Box and Stack with divs using Tailwind CSS for layout.
  • Replace MUI Typography with standard h5 or p tags styled with Tailwind CSS.

Phase 4: Implement Tanstack Form for Connection Details

To handle form state and validation for connection details, we will integrate @tanstack/react-form.

• Task 4.1: Install Dependencies

  • Add @tanstack/react-form and @tanstack/zod-form-adapter to the web-app’s dependencies.

• Task 4.2: Refactor GoogleAdsConnectionDetails.tsx

  • Implement useForm from @tanstack/react-form to manage the form state.
  • Define a Zod schema for validation, ensuring that accountId and accountName are provided for Google Ads connections.
  • Replace the useState-based form management with the new Tanstack Form instance.
  • Add inputs for accountId, accountName, managerAccountId, and managerAccountName.
  • Update the save functionality to work with the form’s submission handlers.

Phase 5: Cleanup Existing Redux and RTK Query Implementation

After the new implementation is in place and working, we will remove the code related to the old implementation.

• Task 5.1: Delete the Redux Connection Slice

  • Delete the file apps/web-app/src/redux/store/slices/connections/connectionsSlice.ts.
  • Find where connectionSlice is used in the main store configuration (likely apps/web-app/src/redux/store/initStore.ts) and remove its reducer.

• Task 5.2: Remove Connection Endpoints from RTK Query

  • Identify the RTK Query API slice that handles connections (likely in apps/web-app/src/redux/services/honeyGridService.ts).
  • Remove the getConnections query and any other connection-related mutations or queries from the service definition.

• Task 5.3: Delete ConnectionReduxHandler.tsx

  • The component at apps/web-app/src/components/ConnectionDetails/ConnectionReduxHandler.tsx is tied to the old Redux implementation. It should be deleted.

Phase 6: Final Integration and Testing

Finally, we need to ensure all the pieces work together correctly.

• Task 6.1: End-to-End Testing
  • Manually test the full user flow for connections:
    • Viewing the list of connections.
    • Viewing the “empty” state when no connections exist.
    • Creating a new connection.
    • Selecting a connection from the list and viewing its details.
    • Editing and saving an existing connection.
    • Deleting a connection.
  • Verify that loading and error states are handled gracefully throughout the UI.