@stackone/hub 0.2.0 → 0.4.0

package/src/modules/integration-picker/components/cardTitle.tsx

@@ -1,53 +0,0 @@
-import {
-    Button,
-    Flex,
-    FlexAlign,
-    FlexDirection,
-    FlexGapSize,
-    FlexJustify,
-    Typography,
-} from '@stackone/malachite';
-import { Integration } from '../types';
-
-interface CardTitleProps {
-    selectedIntegration: Integration;
-    onBack?: () => void;
-    guide?: { supportLink?: string; description: string };
-}
-
-const CardTitle: React.FC<CardTitleProps> = ({ selectedIntegration, onBack, guide }) => {
-    return (
-        <Flex
-            direction={FlexDirection.Horizontal}
-            align={FlexAlign.Center}
-            gapSize={FlexGapSize.Small}
-            justify={FlexJustify.SpaceBetween}
-        >
-            <Flex
-                direction={FlexDirection.Horizontal}
-                align={FlexAlign.Center}
-                gapSize={FlexGapSize.Small}
-                justify={FlexJustify.Left}
-            >
-                {onBack && <Button variant="ghost" onClick={onBack} icon="←" size="small" />}
-                <img
-                    src={`https://app.stackone.com/assets/logos/${selectedIntegration.provider}.png`}
-                    alt={selectedIntegration.provider}
-                    style={{ width: '24px', height: '24px' }}
-                />
-                <Typography.Text fontWeight="semi-bold" size="large">
-                    {selectedIntegration.name}
-                </Typography.Text>
-            </Flex>
-            {guide?.supportLink && (
-                <Typography.LinkText href={guide?.supportLink} target="_blank">
-                    <Button variant="outline" size="medium">
-                        Connection guide
-                    </Button>
-                </Typography.LinkText>
-            )}
-        </Flex>
-    );
-};
-
-export default CardTitle;

package/src/modules/integration-picker/components/views/ErrorView.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-interface ErrorViewProps {
-    message: string;
-}
-
-export const ErrorView: React.FC<ErrorViewProps> = ({ message }) => {
-    return <div>Error: {message}</div>;
-};

package/src/modules/integration-picker/components/views/IntegrationFormView.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { ConnectorConfigField } from '../../types';
-import { IntegrationForm } from '../IntegrationFields';
-
-interface IntegrationFormViewProps {
-    fields: ConnectorConfigField[];
-    error?: {
-        message: string;
-        provider_response: string;
-    };
-    guide?: { supportLink?: string; description: string };
-    onChange: (data: Record<string, string>) => void;
-}
-
-export const IntegrationFormView: React.FC<IntegrationFormViewProps> = ({
-    fields,
-    error,
-    guide,
-    onChange,
-}) => {
-    return <IntegrationForm fields={fields} error={error} onChange={onChange} guide={guide} />;
-};

package/src/modules/integration-picker/components/views/IntegrationListView.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Integration } from '../../types';
-import { IntegrationList } from '../IntegrationList';
-
-interface IntegrationListViewProps {
-    integrations: Integration[];
-    onSelect: (integration: Integration) => void;
-}
-
-export const IntegrationListView: React.FC<IntegrationListViewProps> = ({
-    integrations,
-    onSelect,
-}) => {
-    if (!integrations.length) {
-        return <div>No integrations found.</div>;
-    }
-
-    return <IntegrationList integrations={integrations} onSelect={onSelect} />;
-};

package/src/modules/integration-picker/components/views/LoadingView.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Loading } from '../../../../shared/components/loading';
-
-interface LoadingViewProps {
-    title: string;
-    description: string;
-}
-
-export const LoadingView: React.FC<LoadingViewProps> = ({ title, description }) => {
-    return <Loading title={title} description={description} />;
-};

package/src/modules/integration-picker/components/views/SuccessView.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import Success from '../../../../shared/components/success';
-
-interface SuccessViewProps {
-    integrationName: string;
-}
-
-export const SuccessView: React.FC<SuccessViewProps> = ({ integrationName }) => {
-    return <Success integrationName={integrationName} />;
-};

package/src/modules/integration-picker/components/views/index.ts

@@ -1,5 +0,0 @@
-export { IntegrationListView } from './IntegrationListView';
-export { IntegrationFormView } from './IntegrationFormView';
-export { LoadingView } from './LoadingView';
-export { ErrorView } from './ErrorView';
-export { SuccessView } from './SuccessView';

package/src/modules/integration-picker/hooks/useIntegrationPicker.ts

@@ -1,394 +0,0 @@
-import { evaluate } from '@stackone/expressions';
-import { useQuery } from '@tanstack/react-query';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-    connectAccount,
-    getAccountData,
-    getConnectorConfig,
-    getHubData,
-    updateAccount,
-} from '../queries';
-import { ConnectorConfigField, Integration } from '../types';
-
-const DUMMY_VALUE = 'totally-fake-value';
-
-interface UseIntegrationPickerProps {
-    token: string;
-    baseUrl: string;
-    accountId?: string;
-    onSuccess?: () => void;
-    dashboardUrl?: string;
-}
-
-export enum EventType {
-    AccountConnected = 'AccountConnected',
-    CloseModal = 'CloseModal',
-    CloseOAuth2 = 'CloseOAuth2',
-}
-
-export const useIntegrationPicker = ({
-    token,
-    baseUrl,
-    accountId,
-    onSuccess,
-    dashboardUrl,
-}: UseIntegrationPickerProps) => {
-    const [selectedIntegration, setSelectedIntegration] = useState<Integration | null>(null);
-    const [formData, setFormData] = useState<Record<string, string>>({});
-    const connectWindow = useRef<Window | null>(null);
-    const checkStateTimeoutRef = useRef<number | null>(null);
-    const successTimeoutRef = useRef<number | null>(null);
-    const [connectionState, setConnectionState] = useState<{
-        loading: boolean;
-        success: boolean;
-        error?: {
-            message: string;
-            provider_response: string;
-        };
-    }>({
-        loading: false,
-        success: false,
-    });
-
-    useEffect(() => {
-        return () => {
-            if (checkStateTimeoutRef.current !== null) {
-                clearTimeout(checkStateTimeoutRef.current);
-            }
-            if (successTimeoutRef.current !== null) {
-                clearTimeout(successTimeoutRef.current);
-            }
-        };
-    }, []);
-
-    const processMessageCallback = useCallback((event: MessageEvent) => {
-        if (event.data.type === EventType.AccountConnected) {
-            setConnectionState({ loading: false, success: true });
-            parent.postMessage(event.data, '*');
-            if (connectWindow.current) {
-                connectWindow.current.close();
-                connectWindow.current = null;
-            }
-            window.removeEventListener('message', processMessageCallback, false);
-        } else if (event.data.type === EventType.CloseOAuth2) {
-            if (event.data.error) {
-                setConnectionState({
-                    loading: false,
-                    success: false,
-                    error: {
-                        message: event.data.error,
-                        provider_response: event.data.errorDescription || 'No description',
-                    },
-                });
-            } else {
-                setConnectionState({ loading: false, success: false, error: undefined });
-            }
-
-            if (connectWindow.current) {
-                connectWindow.current.close();
-                connectWindow.current = null;
-            }
-            window.removeEventListener('message', processMessageCallback, false);
-        }
-    }, []);
-
-    const {
-        data: accountData,
-        isLoading: isLoadingAccountData,
-        error: errorAccountData,
-    } = useQuery({
-        queryKey: ['accountData', accountId],
-        queryFn: async () => {
-            if (!accountId) return null;
-            return getAccountData(baseUrl, token, accountId);
-        },
-        enabled: !!accountId,
-    });
-
-    const {
-        data: hubData,
-        isLoading: isLoadingHubData,
-        error: errorHubData,
-    } = useQuery({
-        queryKey: ['hubData', accountData?.provider],
-        queryFn: () => {
-            if (accountData?.provider) {
-                return getHubData(token, baseUrl, accountData.provider);
-            }
-            return getHubData(token, baseUrl);
-        },
-        enabled: !accountId || !!accountData,
-    });
-
-    useEffect(() => {
-        if (accountData && hubData) {
-            const matchingIntegration = hubData.integrations.find(
-                (integration) => integration.provider === accountData.provider,
-            );
-            setSelectedIntegration(matchingIntegration ?? null);
-        }
-    }, [accountData, hubData]);
-
-    const {
-        data: connectorData,
-        isLoading: isLoadingConnectorData,
-        error: errorConnectorData,
-    } = useQuery({
-        queryKey: ['connectorData', selectedIntegration?.provider, accountData?.provider],
-        queryFn: async () => {
-            if (selectedIntegration) {
-                return getConnectorConfig(baseUrl, token, selectedIntegration.provider);
-            }
-            if (accountData) {
-                return getConnectorConfig(baseUrl, token, accountData.provider);
-            }
-            return null;
-        },
-        enabled: Boolean(selectedIntegration) || Boolean(accountData),
-    });
-
-    const { fields, guide } = useMemo(() => {
-        if (!connectorData || !selectedIntegration) {
-            const fields: ConnectorConfigField[] = [];
-            return { fields };
-        }
-
-        const authConfig =
-            connectorData.config.authentication?.[selectedIntegration.authentication_config_key];
-        const authConfigForEnvironment = authConfig?.[selectedIntegration.environment];
-
-        const baseFields = authConfigForEnvironment?.fields || [];
-
-        const fieldsWithPrefilledValues: ConnectorConfigField[] = baseFields
-            .map((field) => {
-                const setupValue = accountData?.setupInformation?.[field.key];
-
-                if (accountData && (field.secret || field.type === 'password')) {
-                    return {
-                        ...field,
-                        key: field.key,
-                        value: DUMMY_VALUE,
-                    };
-                }
-
-                if (field.key === 'external-trigger-token') {
-                    return {
-                        ...field,
-                        key: field.key,
-                        value: hubData?.external_trigger_token,
-                    };
-                }
-
-                const evaluationContext = {
-                    ...formData,
-                    ...accountData?.setupInformation,
-                    external_trigger_token: hubData?.external_trigger_token,
-                    hub_settings: connectorData.hub_settings,
-                };
-
-                if (field.condition) {
-                    const evaluated = evaluate(field.condition, evaluationContext);
-
-                    const shouldShow = evaluated != null && evaluated !== 'false';
-
-                    if (!shouldShow) {
-                        return;
-                    }
-                }
-
-                if (!field.value) {
-                    return {
-                        ...field,
-                        key: field.key,
-                    };
-                }
-
-                const valueToEvaluate = setupValue !== undefined ? setupValue : field.value;
-                let evaluatedValue = evaluate(valueToEvaluate?.toString(), evaluationContext);
-
-                if (typeof evaluatedValue === 'object' && evaluatedValue !== null) {
-                    evaluatedValue = JSON.stringify(evaluatedValue);
-                }
-
-                return {
-                    ...field,
-                    key: field.key,
-                    value: evaluatedValue as string | number | undefined,
-                };
-            })
-            .filter((value) => value != null);
-
-        return {
-            fields: fieldsWithPrefilledValues,
-            guide: authConfigForEnvironment?.guide,
-        };
-    }, [connectorData, selectedIntegration, accountData, formData, hubData]);
-
-    const authConfig = useMemo(() => {
-        if (!connectorData || !selectedIntegration) {
-            return null;
-        }
-        return connectorData.config.authentication?.[
-            selectedIntegration.authentication_config_key
-        ]?.[selectedIntegration.environment];
-    }, [connectorData, selectedIntegration]);
-
-    const handleConnect = useCallback(async () => {
-        if (!selectedIntegration) {
-            return;
-        }
-
-        setConnectionState({ loading: true, success: false });
-
-        try {
-            const cleanedFormData = { ...formData };
-            if (accountData) {
-                fields.forEach((field) => {
-                    if (
-                        (field.secret || field.type === 'password') &&
-                        cleanedFormData[field.key] === DUMMY_VALUE
-                    ) {
-                        delete cleanedFormData[field.key];
-                    }
-                });
-            }
-
-            if (authConfig?.type === 'oauth2') {
-                window.addEventListener('message', processMessageCallback, false);
-                const callbackEmbeddedAccountsUrl = encodeURIComponent(
-                    `${dashboardUrl}/embedded/accounts/callback`,
-                );
-                let windowUrl = `${baseUrl}/connect/oauth2/${selectedIntegration.provider}?redirect_uri=${callbackEmbeddedAccountsUrl}&token=${token}`;
-
-                Object.keys(cleanedFormData).forEach((key) => {
-                    windowUrl += `&${key}=${encodeURIComponent(cleanedFormData[key])}`;
-                });
-
-                const width = 1024;
-                const height = 800;
-                const screenX =
-                    typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft;
-                const screenY =
-                    typeof window.screenY != 'undefined' ? window.screenY : window.screenTop;
-                const outerWidth =
-                    typeof window.outerWidth != 'undefined'
-                        ? window.outerWidth
-                        : document.body.clientWidth;
-                const outerHeight =
-                    typeof window.outerHeight != 'undefined'
-                        ? window.outerHeight
-                        : document.body.clientHeight - 22;
-                const left = screenX + (outerWidth - width) / 2;
-                const top = screenY + (outerHeight - height) / 2.5;
-                const features =
-                    'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top;
-
-                connectWindow.current = window.open(windowUrl, 'Connect Account', features);
-
-                if (connectWindow.current) {
-                    connectWindow.current.focus();
-                    const checkWindowState = () => {
-                        if (connectWindow.current?.closed) {
-                            setConnectionState({ loading: false, success: false });
-                            window.removeEventListener('message', processMessageCallback, false);
-                            connectWindow.current = null;
-                            if (checkStateTimeoutRef.current !== null) {
-                                clearTimeout(checkStateTimeoutRef.current);
-                                checkStateTimeoutRef.current = null;
-                            }
-                        } else if (connectWindow.current) {
-                            checkStateTimeoutRef.current = window.setTimeout(
-                                checkWindowState,
-                                1000,
-                            );
-                        }
-                    };
-                    checkStateTimeoutRef.current = window.setTimeout(checkWindowState, 1000);
-                }
-
-                return;
-            }
-
-            if (accountId) {
-                await updateAccount(
-                    baseUrl,
-                    accountId,
-                    token,
-                    selectedIntegration.provider,
-                    cleanedFormData,
-                );
-            } else {
-                await connectAccount(baseUrl, token, selectedIntegration.provider, cleanedFormData);
-            }
-
-            setConnectionState({ loading: false, success: true });
-            if (successTimeoutRef.current !== null) {
-                clearTimeout(successTimeoutRef.current);
-            }
-            successTimeoutRef.current = window.setTimeout(() => {
-                onSuccess?.();
-                successTimeoutRef.current = null;
-            }, 2000);
-        } catch (error) {
-            const parsedError = JSON.parse((error as Error).message) as {
-                status: number;
-                message: string;
-            };
-
-            const doubleParsedError = JSON.parse(parsedError.message) as {
-                message: string;
-                provider_response: string;
-            };
-
-            setConnectionState({
-                loading: false,
-                success: false,
-                error: {
-                    message: doubleParsedError.message,
-                    provider_response: doubleParsedError.provider_response,
-                },
-            });
-        }
-    }, [
-        baseUrl,
-        dashboardUrl,
-        token,
-        selectedIntegration,
-        formData,
-        onSuccess,
-        accountData,
-        fields,
-        accountId,
-        authConfig,
-        processMessageCallback,
-    ]);
-
-    const isLoading = isLoadingHubData || isLoadingConnectorData || isLoadingAccountData;
-    const hasError = !!(errorHubData || errorConnectorData || errorAccountData);
-
-    return {
-        // Data
-        hubData,
-        accountData,
-        connectorData,
-        selectedIntegration,
-        fields,
-        guide,
-
-        // State
-        formData,
-        connectionState,
-        isLoading,
-        hasError,
-
-        // Errors
-        errorHubData,
-        errorConnectorData,
-        errorAccountData,
-
-        // Actions
-        setSelectedIntegration,
-        setFormData,
-        handleConnect,
-    };
-};

package/src/modules/integration-picker/queries.ts

@@ -1,78 +0,0 @@
-import { getRequest, patchRequest, postRequest } from '../../shared/httpClient';
-import { AccountData, ConnectorConfig, HubConnectorConfig, HubData } from './types';
-
-export const getHubData = async (token: string, baseUrl: string, provider?: string) => {
-    const headers: Record<string, string> = {
-        'Content-Type': 'application/json',
-        'x-hub-session-token': token,
-    };
-
-    // Add provider header when filtering by specific provider
-    if (provider) {
-        headers['x-hub-provider'] = provider;
-    }
-
-    return await getRequest<HubData>({
-        url: `${baseUrl}/hub/connectors`,
-        headers,
-    });
-};
-
-export const getConnectorConfig = async (baseUrl: string, token: string, connectorKey: string) => {
-    return await getRequest<HubConnectorConfig>({
-        url: `${baseUrl}/hub/connectors/${connectorKey}`,
-        headers: {
-            'Content-Type': 'application/json',
-            'x-hub-session-token': token,
-        },
-    });
-};
-
-export const connectAccount = async (
-    baseUrl: string,
-    token: string,
-    provider: string,
-    credentials: Record<string, unknown>,
-) => {
-    return await postRequest<ConnectorConfig>({
-        url: `${baseUrl}/hub/accounts`,
-        headers: {
-            'Content-Type': 'application/json',
-            'x-hub-session-token': token,
-        },
-        body: {
-            provider,
-            credentials,
-        },
-    });
-};
-
-export const updateAccount = async (
-    baseUrl: string,
-    accountId: string,
-    token: string,
-    provider: string,
-    credentials: Record<string, unknown>,
-) => {
-    return await patchRequest<ConnectorConfig>({
-        url: `${baseUrl}/hub/accounts/${accountId}`,
-        headers: {
-            'Content-Type': 'application/json',
-            'x-hub-session-token': token,
-        },
-        body: {
-            provider,
-            credentials,
-        },
-    });
-};
-
-export const getAccountData = async (baseUrl: string, token: string, accountId: string) => {
-    return await getRequest<AccountData>({
-        url: `${baseUrl}/hub/accounts/${accountId}`,
-        headers: {
-            'Content-Type': 'application/json',
-            'x-hub-session-token': token,
-        },
-    });
-};

package/src/modules/integration-picker/types.ts

@@ -1,70 +0,0 @@
-export interface Integration {
-    active: boolean;
-    name: string;
-    provider: string;
-    type: string;
-    version: string;
-    authentication_config_key: string;
-    environment: string;
-}
-
-export interface HubData {
-    integrations: Array<Integration>;
-    external_trigger_token?: string;
-}
-
-export interface ConnectorConfigField {
-    type?: 'text' | 'password' | 'number' | 'select' | 'text_area';
-    label: string;
-    key: string;
-    required: boolean;
-    readOnly: boolean;
-    secret: boolean;
-    placeholder: string;
-    options?: Array<{
-        label: string;
-        value: string;
-    }>;
-    guide?: {
-        description: string;
-        tooltip: string;
-    };
-    value?: string | number;
-    condition?: string;
-    validation?: {
-        type: 'html-pattern' | 'domain';
-        pattern: string;
-        error?: string;
-    };
-}
-
-export interface ConnectorConfig {
-    key: string;
-    name: string;
-    authentication: {
-        [authKey: string]: {
-            [environment: string]: {
-                fields: Array<ConnectorConfigField>;
-                guide?: {
-                    supportLink?: string;
-                    description: string;
-                };
-                type: 'oauth2' | 'oidc' | 'custom';
-            };
-        };
-    };
-}
-
-export interface HubConnectorConfig {
-    config: ConnectorConfig;
-    hub_settings: {
-        configured_webhook_events: Record<string, Set<string>>;
-        project_settings: Record<string, string | object>;
-    };
-}
-
-export interface AccountData {
-    account_id: string;
-    provider: string;
-    setupInformation: Record<string, string>;
-}