Function SecretsManager

frontend/src/pages/SecretsManager.tsx:91–688

()

}

export function SecretsManager() {
  const roles = useAuthStore((state) => state.roles);
  const canManageSecrets = hasAdminRole(roles);
  const isReadOnly = !canManageSecrets;
  const secrets = useSecretStore((state) => state.secrets);
  const loading = useSecretStore((state) => state.loading);
  const error = useSecretStore((state) => state.error);
  const fetchSecrets = useSecretStore((state) => state.fetchSecrets);
  const refreshSecrets = useSecretStore((state) => state.refresh);
  const createSecret = useSecretStore((state) => state.createSecret);
  const updateSecretMetadata = useSecretStore((state) => state.updateSecret);
  const deleteSecretEntry = useSecretStore((state) => state.deleteSecret);
  const rotateSecretValue = useSecretStore((state) => state.rotateSecret);

  const [formState, setFormState] = useState<FormState>(INITIAL_FORM);
  const [formError, setFormError] = useState<string | null>(null);
  const [formSuccess, setFormSuccess] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const disableCreate = isReadOnly || isSubmitting;

  const [listSuccess, setListSuccess] = useState<string | null>(null);

  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const [editingSecret, setEditingSecret] = useState<SecretSummary | null>(null);
  const [editFormState, setEditFormState] = useState<EditFormState>(INITIAL_EDIT_FORM);
  const [editError, setEditError] = useState<string | null>(null);
  const [isEditing, setIsEditing] = useState(false);
  const disableEditing = isReadOnly || isEditing;

  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState<SecretSummary | null>(null);
  const [deleteError, setDeleteError] = useState<string | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);
  const disableDeleting = isReadOnly || isDeleting;

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

  useEffect(() => {
    if (error) {
      setListSuccess(null);
    }
  }, [error]);

  const handleChange =
    (field: keyof FormState) =>
    (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
      setFormState((prev) => ({
        ...prev,
        [field]: event.target.value,
      }));
    };

  const handleEditChange =
    (field: keyof EditFormState) =>