Hello Atlassian Developer Community,
I am working on a Confluence macro using the Forge UI Kit. The purpose of this macro is to display a list of Jira issues and offer search functionality so that users can filter the displayed issues based on their search query.
Here’s the working code I have:
import ForgeUI, { render, Macro, Fragment, Text, useState, Table, Head, Row, Cell, Button, Link } from '@forge/ui';
import api, { route } from "@forge/api";
const handleSearch = async () => {
const response = await api.asUser().requestJira(route`/rest/api/3/search?jql=project=TD`);
const data = await response.json();
return data.issues || [];
};
const JiraMacro = () => {
const [issues, setIssues] = useState(async () => await handleSearch());
const refreshIssues = async () => {
const updatedIssues = await handleSearch();
setIssues(updatedIssues);
};
if (!issues.length) {
return <Text>No issues found.</Text>;
}
return (
<Fragment>
<Table>
<Head>
<Cell><Text>Issue Key</Text></Cell>
<Cell><Text>Summary</Text></Cell>
<Cell><Text>Status</Text></Cell>
<Cell><Text>Assignee</Text></Cell>
<Cell><Text>Priority</Text></Cell>
<Cell><Text>Created</Text></Cell>
<Cell><Text>Updated</Text></Cell>
</Head>
{issues.map(issue => (
<Row>
<Cell>
<Text>
<Link href={`https://nleyes.atlassian.net/browse/${issue.key}`}>{issue.key}</Link>
</Text>
</Cell>
<Cell>
<Text>
<Link href={`https://nleyes.atlassian.net/browse/${issue.key}`}>{issue.fields.summary}</Link>
</Text>
</Cell>
<Cell><Text>{issue.fields.status.name}</Text></Cell>
<Cell><Text>{issue.fields.assignee ? issue.fields.assignee.displayName : "Unassigned"}</Text></Cell>
<Cell><Text>{issue.fields.priority.name}</Text></Cell>
<Cell><Text>{new Date(issue.fields.created).toLocaleDateString()}</Text></Cell>
<Cell><Text>{new Date(issue.fields.updated).toLocaleDateString()}</Text></Cell>
</Row>
))}
</Table>
<Text>Total Issues: {issues.length}</Text>
<Button text="Refresh" onClick={refreshIssues} />
</Fragment>
);
};
export const run = render(<Macro app={<JiraMacro/>}/>);
The code above successfully fetches Jira issues and displays them in a table format. However, when I tried to introduce a TextField to implement search functionality, I encountered the following challenges:
- When introducing the
TextFieldoutside aFormcomponent, I received a validation error indicating that theTextFieldmust be used within specific contexts (likeForm,ConfigForm,MacroConfig, etc.) - I tried wrapping the
TextFieldinside aFormcomponent, but then faced a generic error: “Cannot read property ‘prop’ of undefined.”
Given these challenges:
- How can I successfully integrate the
TextFieldor any other input method to introduce a search functionality in my macro? - Are there any known issues or workarounds for the errors I encountered?
- If direct integration is problematic, are there any recommended alternative approaches to achieve this search functionality?
Any insights, suggestions, or code examples would be greatly appreciated.
I really appreciate any help you can provide.
By the way, I already asked before here: Seeking Guidance for Building a Custom Macro to Implement Search Functionality on a Confluence Page with JIRA Issue/Filter Macro how to achieve this and in how I found my way to start this.
