init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import { Label } from "@humansignal/ui";
import { useEffect } from "react";
import { ProviderGrid } from "../components";
import type { ProviderConfig } from "../types/provider";
 
interface ProviderSelectionStepProps {
  formData: {
    provider: string;
  };
  errors: {
    provider?: string;
  };
  handleSelectChange: (name: string, value: string) => void;
  setFormState: (updater: (prevState: any) => any) => void;
  storageTypesLoading?: boolean;
  target?: "import" | "export";
  providers: Record<string, ProviderConfig>;
}
 
export const ProviderSelectionStep = ({
  formData,
  errors,
  handleSelectChange,
  providers,
}: ProviderSelectionStepProps) => {
  // Set default provider if none is selected and we have options
  useEffect(() => {
    if (!formData.provider && Object.entries(providers).length > 0) {
      // Find the first non-disabled provider
      const enabledProviders = Object.values(providers).filter((provider) => !provider.disabled);
      if (enabledProviders.length > 0) {
        handleSelectChange("provider", enabledProviders[0].name);
      }
    }
  }, [providers, formData.provider, handleSelectChange]);
 
  // Get the selected provider config
  const selectedProvider = formData.provider ? providers[formData.provider] : null;
  const isSelectedProviderDisabled = selectedProvider?.disabled || false;
 
  // Get the message content from the provider config
  const getMessageContent = () => {
    if (!selectedProvider?.fields) return null;
 
    const messageField = selectedProvider.fields.find((field) => field.type === "message");
    return messageField?.content || null;
  };
 
  const messageContent = getMessageContent();
 
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-xl font-semibold">Choose your cloud storage provider</h2>
        <p className="text-muted-foreground">Select the cloud storage service where your data is stored</p>
      </div>
 
      <div className="space-y-4">
        <div className="space-y-2">
          <Label text="Storage Provider" required />
          <ProviderGrid
            providers={providers}
            selectedProvider={formData.provider}
            onProviderSelect={(providerName) => handleSelectChange("provider", providerName)}
            error={errors.provider}
          />
        </div>
 
        {/* Show alert message when disabled provider is selected */}
        {isSelectedProviderDisabled && messageContent && (
          <div>{typeof messageContent === "function" ? messageContent({}) : messageContent}</div>
        )}
      </div>
    </div>
  );
};