Function DataSourceSidebarPanel

src/views/DataSourceSidebar.tsx:353–2072

({ panelWidth, onOpenUploadDialog, onCollapse, initialTab = 'sources', connectorRefreshKey = 0, disableConnectors = false })

    connectorRefreshKey?: number;
    disableConnectors?: boolean;
}> = ({ panelWidth, onOpenUploadDialog, onCollapse, initialTab = 'sources', connectorRefreshKey = 0, disableConnectors = false }) => {
    const { t } = useTranslation();
    const dispatch = useDispatch<AppDispatch>();

    const activeWorkspace = useSelector((state: DataFormulatorState) => state.activeWorkspace);
    const identityKey = useSelector(
        (state: DataFormulatorState) => `${state.identity.type}:${state.identity.id}`,
    );

    // Lightweight selector: only extract the fields we need from tables to avoid
    // re-rendering the entire sidebar when table row data changes.
    const tableIdentities = useSelector(
        (state: DataFormulatorState) => state.tables.map(t => ({
            id: t.id,
            connectorId: t.source?.connectorId,
            databaseTable: t.source?.databaseTable,
            originalTableName: t.source?.originalTableName,
            virtualTableId: t.virtual?.tableId,
        })),
        // Shallow-compare the mapped array by serializing — cheap because it's just IDs/strings
        (a, b) => a.length === b.length && a.every((item, i) => item.id === b[i].id),
    );

    // Connector instances fetched from backend
    const [connectors, setConnectors] = useState<ConnectorInstance[]>([]);
    const [loadingConnectors, setLoadingConnectors] = useState(false);

    // Catalog tree state per connector ID. Keep loading/error explicit instead
    // of inferring it from whether a cache object exists.
    const [catalogByConnector, setCatalogByConnector] = useState<Record<string, LoadableState<CatalogCache>>>({});
    const catalogCache = useMemo(() => {
        const cache: Record<string, CatalogCache> = {};
        for (const [connectorId, state] of Object.entries(catalogByConnector)) {
            if (state.data && state.status !== 'error') {
                cache[connectorId] = state.data;
            }
        }
        return cache;
    }, [catalogByConnector]);

    // Which source section is currently expanded (only one at a time —
    // clicking a different connector switches the expansion). Catalog
    // browsing is a focused activity; users don't need multiple trees open
    // simultaneously, and keeping it single-expanded means layout above any
    // focused row stays stable.
    const [expandedConnectorId, setExpandedConnectorId] = useState<string | null>(null);

    // Tree expanded items per connector
    const [treeExpanded, setTreeExpanded] = useState<Record<string, string[]>>({});

    // Preview popover state
    const [preview, setPreview] = useState<PreviewState | null>(null);
    const [previewAnchor, setPreviewAnchor] = useState<HTMLElement | null>(null);
    const [importing, setImporting] = useState(false);

    // Delete connector confirmation
    const [deleteTarget, setDeleteTarget] = useState<ConnectorInstance | null>(null);
    const [deleting, setDeleting] = useState(false);