Function IntegrationsManager

frontend/src/pages/IntegrationsManager.tsx:63–587

()

}

export function IntegrationsManager() {
  const navigate = useNavigate();
  const location = useLocation();
  const userId = getCurrentUserId();
  const {
    providers,
    connections,
    fetchProviders,
    fetchConnections,
    refreshConnection,
    disconnect,
    upsertConnection,
    error,
    resetError,
    loadingProviders,
    loadingConnections,
  } = useIntegrationStore();
  const { toast } = useToast();

  const [configProvider, setConfigProvider] = useState<IntegrationProvider | null>(null);
  const [connectingProvider, setConnectingProvider] = useState<string | null>(null);
  const [refreshingConnectionId, setRefreshingConnectionId] = useState<string | null>(null);
  const [deletingConnectionId, setDeletingConnectionId] = useState<string | null>(null);
  const [customScopes, setCustomScopes] = useState<Record<string, string>>({});

  useEffect(() => {
    fetchProviders().catch((err) => {
      console.error('Failed to load providers', err);
    });
  }, [fetchProviders]);

  useEffect(() => {
    fetchConnections(userId).catch((err) => {
      console.error('Failed to load integrations', err);
    });
  }, [fetchConnections, userId]);

  useEffect(() => {
    if (!error) {
      return;
    }

    toast({
      title: 'Integration error',
      description: error,
      variant: 'destructive',
    });
  }, [error, toast]);

  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const connectedProvider = params.get('connected');
    if (connectedProvider) {
      toast({
        title: 'Connection established',
        description: `Successfully connected to ${connectedProvider}.`,
      });
      params.delete('connected');