Function DataSourceForm

client/src/pages/admin/pages/add-data-source.tsx:13–177

({ initialData, isEditMode, setShowModal }: DataSourceFormProps)

}

export const DataSourceForm = ({ initialData, isEditMode, setShowModal }: DataSourceFormProps) => {
  const addDataSource = useAddDataSource();
  const updateDataSource = useUpdateDataSource();
  const formRef = useRef<HTMLFormElement>(null);

  useEffect(() => {
    const form = formRef.current;
    if (initialData && form) {
      form.name.value = initialData.name || '';
      form.account.value = initialData.account || '';
      form.container.value = initialData.container || '';
      form.description.value = initialData.description || '';
      form.imageURL.value = initialData.imageURL || '';
      form.sasToken.value = initialData.sasToken || '';
      form.accountKey.value = initialData.accountKey || '';
      form.owners.value = initialData.owners?.join(', ') || '';
      form.readers.value = initialData.readers?.join(', ') || '';
      form.public.value = initialData.public ? 'true' : 'false';
    }
  }, [initialData]);

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    const form = formRef.current;

    const formData: DataSource = {
      type: ClientType.API,
      name: event.target.elements.name.value,
      account: event.target.elements.account.value,
      container: event.target.elements.container.value,
      description: event.target.elements.description.value,
      imageURL: event.target.elements.imageURL.value,
      sasToken: event.target.elements.sasToken.value,
      accountKey: event.target.elements.accountKey.value,
      owners: event.target.elements.owners.value === '' ? [] : event.target.elements.owners.value.split(',').map(s => s.trim()),
      readers: event.target.elements.readers.value === '' ? [] : event.target.elements.readers.value.split(',').map(s => s.trim()),
      public: event.target.elements.public.value.toLowerCase() === 'true' ? true : false,

    };

    if (isEditMode) {
      updateDataSource.mutate(formData, {
        onSuccess: () => {
          toast('Successfully updated data source', {
            icon: '👍',
            className: 'bg-green-100 font-bold',
          });
          setShowModal(false);
        },
        onError: (err, newMeta, context) => {
          toast('Something went wrong updating the data source', {
            icon: '😖',
            className: 'bg-red-100 font-bold',
          });
          console.error('onError', err);
        },
      });
    } else {