Dear Community
I banging my head because of this. I have a Forge app using the Forge UI components. The app does what I want, but somehow the onSubmit function is never executed. Is this a bug or do I miss something here?
I am posting my App below for your reference.
const App = () => {
const { extensionContext } = useProductContext();
const importId = extensionContext.importId;
const workspaceId = extensionContext.workspaceId;
// State for the form fields
const [apiUrl, setApiUrl] = useState(null);
const [apiToken, setApiToken] = useState(null);
// Fetch API URL and Token from storage, assuming keys are 'api-url' and 'api-token'
const apiUrlResponse = storage.get('api-url');
const apiTokenResponse = storage.getSecret('api-token');
//Fetch existing configuration on component mount
useEffect(() => {
async function fetchConfig() {
console.log("Fetching existing configuration...");
try {
// Update state only if responses are valid
if (apiUrlResponse) {
setApiUrl(apiUrlResponse);
}
if (apiTokenResponse) {
setApiToken(apiTokenResponse);
}
} catch (error) {
console.error('Error fetching configuration:', error);
}
}
fetchConfig();
}, []); // Empty dependency array ensures this runs only once when the component mounts
const onSubmit = async (formData) => {
console.log("submit button clicked, submitting schema to import source...");
// Update API URL and Token in storage
console.log("Form data received:", formData);
//Example: updating storage with the new API URL and token
try {
// Storing API URL and token using Forge's storage API
if (formData.apiUrl) {
await storage.set('api-url', formData.apiUrl);
setApiUrl(formData.apiUrl);
console.log("API URL updated successfully.");
}
if (formData.apiToken) {
await storage.setSecret('api-token', formData.apiToken);
setApiToken(formData.apiToken);
console.log("API Token updated successfully.");
}
// Additional business logic based on form submission
console.log("Form submitted and processed successfully.");
} catch (error) {
console.error("Error handling form submission:", error);
}
const response = await api
.asUser()
.requestJira(
route`/jsm/assets/workspace/${workspaceId}/v1/importsource/${importId}/mapping`,
{
method: "PUT",
body: JSON.stringify(mapping),
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
},
);
console.log("setup mapping", response.status);
if (response.status === 204) {
console.log("schema submitted successfully");
}
if (response.status === 409) {
console.log("A mapping already exists for this import");
}
else {
console.log("status code: ", response.status);
}
};
return (
<AssetsAppImportTypeConfiguration onSubmit={onSubmit}>
<Heading size="large">Netbox Importer Config</Heading>
<Text>
Netbox Importer App Config, ImportId = {importId}, WorkspaceId ={" "}
{workspaceId}
</Text>
<TextField
label="Netbox API URL"
name="apiUrl"
defaultValue={apiUrl}
placeholder="Enter API Endpoint URL"
/>
<TextField
label="Netbox API Token"
name="apiToken"
type="password"
defaultValue={apiToken}
placeholder="Enter API Token"
/>
</AssetsAppImportTypeConfiguration>
);
};
export const renderImportConfig = render(<App />);
Kind regards