rn-backstage 1.4.7 → 1.5.0

package/lib/module/components/EnvironmentTab.js

@@ -0,0 +1,741 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, Alert, FlatList, KeyboardAvoidingView, Modal, Platform, SafeAreaView, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { MonospaceFont, TestIDs } from '../constants';
+import { useBackstageTheme } from '../ThemeContext';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// ─── Constants ───────────────────────────────────────────────────────────────
+
+const STORAGE_KEY_PREFIX = 'backstage.env.credentials.';
+
+// ─── Credential Editor Modal ─────────────────────────────────────────────────
+
+const EditorModal = ({
+  visible,
+  title,
+  credentialName,
+  fieldValues,
+  credentialFields = [],
+  onChangeName,
+  onChangeField,
+  onSave,
+  onCancel,
+  theme
+}) => {
+  const s = useMemo(() => createStyles(theme), [theme]);
+  return /*#__PURE__*/_jsx(Modal, {
+    testID: TestIDs.environmentTab.editorModal,
+    visible: visible,
+    animationType: "slide",
+    transparent: false,
+    onRequestClose: onCancel,
+    children: /*#__PURE__*/_jsxs(SafeAreaView, {
+      style: s.modalContainer,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: s.modalHeader,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          testID: TestIDs.environmentTab.editorCancelButton,
+          onPress: onCancel,
+          hitSlop: {
+            top: 8,
+            bottom: 8,
+            left: 8,
+            right: 8
+          },
+          children: /*#__PURE__*/_jsx(Text, {
+            style: s.modalCancelText,
+            children: "Cancel"
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: s.modalTitle,
+          children: title
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          testID: TestIDs.environmentTab.editorSaveButton,
+          onPress: onSave,
+          hitSlop: {
+            top: 8,
+            bottom: 8,
+            left: 8,
+            right: 8
+          },
+          children: /*#__PURE__*/_jsx(Text, {
+            style: s.modalSaveText,
+            children: "Save"
+          })
+        })]
+      }), /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+        style: s.modalBody,
+        behavior: Platform.OS === 'ios' ? 'padding' : undefined,
+        children: /*#__PURE__*/_jsxs(ScrollView, {
+          contentContainerStyle: s.modalBodyContent,
+          keyboardShouldPersistTaps: "handled",
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: s.modalLabel,
+            children: "Name"
+          }), /*#__PURE__*/_jsx(TextInput, {
+            testID: TestIDs.environmentTab.editorNameInput,
+            style: s.modalInput,
+            value: credentialName,
+            onChangeText: onChangeName,
+            placeholder: "e.g., QA Account, Admin",
+            placeholderTextColor: theme.textMuted,
+            autoCapitalize: "words",
+            autoFocus: true
+          }), credentialFields.map(field => /*#__PURE__*/_jsxs(View, {
+            style: {
+              marginTop: 16
+            },
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: s.modalLabel,
+              children: field.label
+            }), /*#__PURE__*/_jsx(TextInput, {
+              testID: TestIDs.environmentTab.editorFieldInput(field.key),
+              style: [s.modalInput, field.secureTextEntry ? undefined : undefined],
+              value: fieldValues[field.key] || '',
+              onChangeText: val => onChangeField(field.key, val),
+              placeholder: field.placeholder || field.label,
+              placeholderTextColor: theme.textMuted,
+              secureTextEntry: field.secureTextEntry,
+              autoCapitalize: field.autoCapitalize ?? 'none',
+              autoCorrect: false,
+              keyboardType: field.keyboardType
+            })]
+          }, field.key))]
+        })
+      })]
+    })
+  });
+};
+
+// ─── Credential Row ──────────────────────────────────────────────────────────
+
+const CredentialRow = ({
+  envKey,
+  index,
+  credential,
+  envColor,
+  onLogin,
+  onEdit,
+  onDelete,
+  loggingIn,
+  theme
+}) => {
+  const s = useMemo(() => createStyles(theme), [theme]);
+  const fieldCount = Object.keys(credential.values).length;
+  return /*#__PURE__*/_jsxs(View, {
+    testID: TestIDs.environmentTab.credentialRow(envKey, index),
+    style: s.credRow,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: s.credRowLeft,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: s.credName,
+        numberOfLines: 1,
+        children: credential.name
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: s.credMeta,
+        children: [fieldCount, " field", fieldCount !== 1 ? 's' : '']
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: s.credRowActions,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        testID: TestIDs.environmentTab.credentialLogin(envKey, index),
+        style: [s.credActionButton, {
+          backgroundColor: envColor
+        }],
+        onPress: onLogin,
+        disabled: loggingIn,
+        activeOpacity: 0.7,
+        hitSlop: {
+          top: 4,
+          bottom: 4,
+          left: 4,
+          right: 4
+        },
+        children: loggingIn ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "small",
+          color: "#FFF"
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: s.credActionLoginText,
+          children: "Login"
+        })
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        testID: TestIDs.environmentTab.credentialEdit(envKey, index),
+        onPress: onEdit,
+        hitSlop: {
+          top: 8,
+          bottom: 8,
+          left: 8,
+          right: 8
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: s.credActionIcon,
+          children: "\u270E"
+        })
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        testID: TestIDs.environmentTab.credentialDelete(envKey, index),
+        onPress: onDelete,
+        hitSlop: {
+          top: 8,
+          bottom: 8,
+          left: 8,
+          right: 8
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [s.credActionIcon, s.credDeleteIcon],
+          children: "\u2715"
+        })
+      })]
+    })]
+  });
+};
+
+// ─── Main Component ──────────────────────────────────────────────────────────
+
+export const EnvironmentTab = ({
+  config
+}) => {
+  const {
+    environments,
+    activeEnvironment,
+    onEnvironmentChange,
+    credentialFields = [],
+    onLogin,
+    initialCredentials,
+    storageAdapter
+  } = config;
+  const theme = useBackstageTheme();
+  const s = useMemo(() => createStyles(theme), [theme]);
+
+  // ── Credentials state: Record<envKey, SavedCredential[]> ──
+  const [credentials, setCredentials] = useState(() => {
+    const init = {};
+    for (const env of environments) {
+      init[env.key] = initialCredentials?.[env.key] ? [...initialCredentials[env.key]] : [];
+    }
+    return init;
+  });
+  const [loadingCredentials, setLoadingCredentials] = useState(!!storageAdapter);
+  const [loggingInKey, setLoggingInKey] = useState(null);
+
+  // ── Editor modal state ─────────────────────────────────────
+  const [editorVisible, setEditorVisible] = useState(false);
+  const [editorEnvKey, setEditorEnvKey] = useState('');
+  const [editorIndex, setEditorIndex] = useState(null); // null = add new
+  const [editorName, setEditorName] = useState('');
+  const [editorFields, setEditorFields] = useState({});
+
+  // ── Load persisted credentials on mount ────────────────────
+  useEffect(() => {
+    if (!storageAdapter) return;
+    let cancelled = false;
+    const load = async () => {
+      try {
+        for (const env of environments) {
+          const stored = await storageAdapter.getItem(STORAGE_KEY_PREFIX + env.key);
+          if (stored && !cancelled) {
+            try {
+              const parsed = JSON.parse(stored);
+              if (Array.isArray(parsed)) {
+                setCredentials(prev => ({
+                  ...prev,
+                  [env.key]: parsed
+                }));
+              }
+            } catch {
+              // Invalid JSON — ignore
+            }
+          }
+        }
+      } finally {
+        if (!cancelled) setLoadingCredentials(false);
+      }
+    };
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [storageAdapter, environments]);
+
+  // ── Persist credentials to storage ─────────────────────────
+  const persistCredentials = useCallback((envKey, creds) => {
+    if (!storageAdapter) return;
+    storageAdapter.setItem(STORAGE_KEY_PREFIX + envKey, JSON.stringify(creds)).catch(() => {});
+  }, [storageAdapter]);
+
+  // ── Editor open/close ──────────────────────────────────────
+  const openAddEditor = useCallback(envKey => {
+    setEditorEnvKey(envKey);
+    setEditorIndex(null);
+    setEditorName('');
+    setEditorFields({});
+    setEditorVisible(true);
+  }, []);
+  const openEditEditor = useCallback((envKey, index) => {
+    const cred = credentials[envKey]?.[index];
+    if (!cred) return;
+    setEditorEnvKey(envKey);
+    setEditorIndex(index);
+    setEditorName(cred.name);
+    setEditorFields({
+      ...cred.values
+    });
+    setEditorVisible(true);
+  }, [credentials]);
+  const closeEditor = useCallback(() => {
+    setEditorVisible(false);
+    setEditorEnvKey('');
+    setEditorIndex(null);
+    setEditorName('');
+    setEditorFields({});
+  }, []);
+  const saveEditor = useCallback(() => {
+    const trimmedName = editorName.trim();
+    if (!trimmedName) {
+      Alert.alert('Error', 'Credential name cannot be empty');
+      return;
+    }
+    const newCred = {
+      name: trimmedName,
+      values: {
+        ...editorFields
+      }
+    };
+    setCredentials(prev => {
+      const envCreds = [...(prev[editorEnvKey] || [])];
+      if (editorIndex !== null) {
+        // Edit existing
+        envCreds[editorIndex] = newCred;
+      } else {
+        // Add new
+        envCreds.push(newCred);
+      }
+      persistCredentials(editorEnvKey, envCreds);
+      return {
+        ...prev,
+        [editorEnvKey]: envCreds
+      };
+    });
+    closeEditor();
+  }, [editorName, editorFields, editorEnvKey, editorIndex, persistCredentials, closeEditor]);
+  const updateEditorField = useCallback((fieldKey, value) => {
+    setEditorFields(prev => ({
+      ...prev,
+      [fieldKey]: value
+    }));
+  }, []);
+
+  // ── Delete credential ──────────────────────────────────────
+  const confirmDelete = useCallback((envKey, index) => {
+    const cred = credentials[envKey]?.[index];
+    if (!cred) return;
+    Alert.alert('Delete Credential', `Remove "${cred.name}"?`, [{
+      text: 'Cancel',
+      style: 'cancel'
+    }, {
+      text: 'Delete',
+      style: 'destructive',
+      onPress: () => {
+        setCredentials(prev => {
+          const envCreds = [...(prev[envKey] || [])];
+          envCreds.splice(index, 1);
+          persistCredentials(envKey, envCreds);
+          return {
+            ...prev,
+            [envKey]: envCreds
+          };
+        });
+      }
+    }]);
+  }, [credentials, persistCredentials]);
+
+  // ── Handle login ───────────────────────────────────────────
+  const handleLogin = useCallback(async (envKey, index) => {
+    if (!onLogin) return;
+    const cred = credentials[envKey]?.[index];
+    if (!cred) return;
+    const loginKey = `${envKey}:${index}`;
+    setLoggingInKey(loginKey);
+    try {
+      await onLogin(envKey, cred.values);
+    } finally {
+      setLoggingInKey(null);
+    }
+  }, [onLogin, credentials]);
+  const activeEnv = environments.find(e => e.key === activeEnvironment);
+  return /*#__PURE__*/_jsxs(View, {
+    style: s.container,
+    children: [/*#__PURE__*/_jsx(FlatList, {
+      testID: TestIDs.environmentTab.container,
+      data: environments,
+      keyExtractor: env => env.key,
+      contentContainerStyle: s.contentContainer,
+      showsVerticalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      renderItem: ({
+        item: env
+      }) => {
+        const isActive = env.key === activeEnvironment;
+        const envColor = env.color || theme.accent;
+        const envCreds = credentials[env.key] || [];
+        return /*#__PURE__*/_jsxs(View, {
+          testID: TestIDs.environmentTab.environmentCard(env.key),
+          style: [s.card, isActive && s.cardActive, isActive && {
+            borderColor: envColor
+          }],
+          children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+            testID: TestIDs.environmentTab.radioButton(env.key),
+            style: s.cardHeader,
+            onPress: () => onEnvironmentChange(env.key),
+            activeOpacity: 0.7,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: s.radioRow,
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [s.radio, isActive && s.radioActive, isActive && {
+                  borderColor: envColor
+                }],
+                children: isActive && /*#__PURE__*/_jsx(View, {
+                  style: [s.radioDot, {
+                    backgroundColor: envColor
+                  }]
+                })
+              }), /*#__PURE__*/_jsxs(View, {
+                style: s.envInfo,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: [s.envLabel, isActive && {
+                    color: envColor
+                  }],
+                  children: env.label
+                }), env.baseUrl && /*#__PURE__*/_jsx(Text, {
+                  style: s.envUrl,
+                  numberOfLines: 1,
+                  children: env.baseUrl
+                })]
+              })]
+            }), isActive && /*#__PURE__*/_jsx(View, {
+              style: [s.activeBadge, {
+                backgroundColor: envColor + '20'
+              }],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [s.activeBadgeText, {
+                  color: envColor
+                }],
+                children: "Active"
+              })
+            })]
+          }), isActive && credentialFields.length > 0 && /*#__PURE__*/_jsx(View, {
+            style: s.credentialsContainer,
+            children: loadingCredentials ? /*#__PURE__*/_jsxs(View, {
+              style: s.loadingContainer,
+              children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+                size: "small",
+                color: theme.textMuted
+              }), /*#__PURE__*/_jsx(Text, {
+                style: s.loadingText,
+                children: "Loading credentials\u2026"
+              })]
+            }) : /*#__PURE__*/_jsxs(_Fragment, {
+              children: [envCreds.length === 0 ? /*#__PURE__*/_jsx(View, {
+                style: s.emptyState,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: s.emptyText,
+                  children: "No saved credentials"
+                })
+              }) : envCreds.map((cred, index) => /*#__PURE__*/_jsx(CredentialRow, {
+                envKey: env.key,
+                index: index,
+                credential: cred,
+                envColor: envColor,
+                onLogin: () => handleLogin(env.key, index),
+                onEdit: () => openEditEditor(env.key, index),
+                onDelete: () => confirmDelete(env.key, index),
+                loggingIn: loggingInKey === `${env.key}:${index}`,
+                theme: theme
+              }, `${cred.name}-${index}`)), /*#__PURE__*/_jsx(TouchableOpacity, {
+                testID: TestIDs.environmentTab.addButton(env.key),
+                style: [s.addButton, {
+                  borderColor: envColor
+                }],
+                onPress: () => openAddEditor(env.key),
+                activeOpacity: 0.7,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [s.addButtonText, {
+                    color: envColor
+                  }],
+                  children: "\uFF0B Add Credential"
+                })
+              })]
+            })
+          })]
+        });
+      },
+      ListFooterComponent: /*#__PURE__*/_jsx(View, {
+        testID: TestIDs.environmentTab.activeLabel,
+        style: s.footer,
+        children: /*#__PURE__*/_jsxs(Text, {
+          style: s.footerText,
+          children: ["Active: ", activeEnv?.label ?? activeEnvironment, storageAdapter ? ' · Credentials saved' : '']
+        })
+      })
+    }), /*#__PURE__*/_jsx(EditorModal, {
+      visible: editorVisible,
+      title: editorIndex !== null ? 'Edit Credential' : 'Add Credential',
+      credentialName: editorName,
+      fieldValues: editorFields,
+      credentialFields: credentialFields,
+      onChangeName: setEditorName,
+      onChangeField: updateEditorField,
+      onSave: saveEditor,
+      onCancel: closeEditor,
+      theme: theme
+    })]
+  });
+};
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const createStyles = t => StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  contentContainer: {
+    padding: 14,
+    paddingBottom: 40
+  },
+  // ── Card ────────────────────────
+  card: {
+    backgroundColor: t.surface,
+    borderRadius: 12,
+    borderWidth: 1.5,
+    borderColor: t.border,
+    marginBottom: 12,
+    overflow: 'hidden'
+  },
+  cardActive: {
+    backgroundColor: t.surfaceElevated
+  },
+  cardHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 14
+  },
+  radioRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1
+  },
+  radio: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: t.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12
+  },
+  radioActive: {
+    borderWidth: 2
+  },
+  radioDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5
+  },
+  envInfo: {
+    flex: 1
+  },
+  envLabel: {
+    fontFamily: MonospaceFont,
+    fontSize: 15,
+    fontWeight: '700',
+    color: t.text
+  },
+  envUrl: {
+    fontFamily: MonospaceFont,
+    fontSize: 11,
+    color: t.textMuted,
+    marginTop: 3
+  },
+  activeBadge: {
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    marginLeft: 8
+  },
+  activeBadgeText: {
+    fontFamily: MonospaceFont,
+    fontSize: 10,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 0.5
+  },
+  // ── Credentials Section ─────────
+  credentialsContainer: {
+    paddingHorizontal: 14,
+    paddingBottom: 14,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: t.border,
+    paddingTop: 10
+  },
+  emptyState: {
+    alignItems: 'center',
+    paddingVertical: 14
+  },
+  emptyText: {
+    fontFamily: MonospaceFont,
+    fontSize: 12,
+    color: t.textMuted,
+    fontStyle: 'italic'
+  },
+  // ── Credential Row ──────────────
+  credRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: t.border
+  },
+  credRowLeft: {
+    flex: 1,
+    marginRight: 8
+  },
+  credName: {
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    fontWeight: '700',
+    color: t.text
+  },
+  credMeta: {
+    fontFamily: MonospaceFont,
+    fontSize: 10,
+    color: t.textMuted,
+    marginTop: 2
+  },
+  credRowActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10
+  },
+  credActionButton: {
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 5,
+    minWidth: 55,
+    alignItems: 'center'
+  },
+  credActionLoginText: {
+    fontFamily: MonospaceFont,
+    fontSize: 11,
+    fontWeight: '700',
+    color: '#FFFFFF'
+  },
+  credActionIcon: {
+    fontSize: 16,
+    color: t.textMuted
+  },
+  credDeleteIcon: {
+    color: t.error
+  },
+  // ── Add Button ──────────────────
+  addButton: {
+    borderRadius: 8,
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    paddingVertical: 10,
+    alignItems: 'center',
+    marginTop: 10
+  },
+  addButtonText: {
+    fontFamily: MonospaceFont,
+    fontSize: 12,
+    fontWeight: '700'
+  },
+  // ── Footer ──────────────────────
+  footer: {
+    alignItems: 'center',
+    paddingVertical: 12
+  },
+  footerText: {
+    fontFamily: MonospaceFont,
+    fontSize: 11,
+    color: t.textMuted,
+    fontStyle: 'italic'
+  },
+  // ── Loading ─────────────────────
+  loadingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    paddingVertical: 12
+  },
+  loadingText: {
+    fontFamily: MonospaceFont,
+    fontSize: 12,
+    color: t.textMuted
+  },
+  // ── Editor Modal ────────────────
+  modalContainer: {
+    flex: 1,
+    backgroundColor: t.background
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: t.border
+  },
+  modalTitle: {
+    fontFamily: MonospaceFont,
+    fontSize: 16,
+    fontWeight: '700',
+    color: t.text,
+    flex: 1,
+    textAlign: 'center'
+  },
+  modalCancelText: {
+    fontFamily: MonospaceFont,
+    fontSize: 14,
+    color: t.textSecondary,
+    fontWeight: '600'
+  },
+  modalSaveText: {
+    fontFamily: MonospaceFont,
+    fontSize: 14,
+    color: t.accent,
+    fontWeight: '700'
+  },
+  modalBody: {
+    flex: 1
+  },
+  modalBodyContent: {
+    padding: 16
+  },
+  modalLabel: {
+    fontFamily: MonospaceFont,
+    fontSize: 12,
+    fontWeight: '700',
+    color: t.textMuted,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginBottom: 6
+  },
+  modalInput: {
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    color: t.text,
+    backgroundColor: t.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: t.border,
+    paddingHorizontal: 12,
+    paddingVertical: 10
+  }
+});
+//# sourceMappingURL=EnvironmentTab.js.map