Hi Everyone,
I hope you’re all doing great. I have created a custom macro for Confluence that shows data from Jira. It’s working well, but I want to make it even better by changing its style to look more like the default Jira filter macro.
I am trying to add a border after every row to make the data easier to read. I also want to move the text field and search button to the middle of the screen and but them on the same raw to make it look neater.
I am not sure how to do these things because of some limits in the UI. Can anyone give me advice or tips on how to do this?
Here is my table code :
<Fragment>
<Form onSubmit={handleSubmit} style={{ display: 'inline-block', marginRight: '10px' }}submitButtonText='Search'>
<TextField name='issueId' type='text' style={{ width: '200px' }} placeholder='Enter your Ticket Key to Search' />
</Form>
<Table rowsPerPage="50">
<Head>
<Cell>
<Heading size="medium">Issue key</Heading>
</Cell>
<Cell>
<Heading size="medium">Summary</Heading>
</Cell>
<Cell>
<Heading size="medium">Status</Heading>
</Cell>
<Cell>
<Heading size="medium">Assignee</Heading>
</Cell>
<Cell>
<Heading size="medium">Priority</Heading>
</Cell>
<Cell>
<Heading size="medium">Created</Heading>
</Cell>
<Cell>
<Heading size="medium">Updated</Heading>
</Cell>
</Head>
{issues?.map((issue, index) => {
const badgeAppearance = getStatusBadgeAppearance(issue.fields.status.name);
console.log('Status:', issue.fields.status.name, 'Badge Appearance:', badgeAppearance);
return (
<Row key={issue?.id}>
<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>
<StatusLozenge
text={issue.fields.status.name}
appearance={badgeAppearance}
/>
</Text>
</Cell>
<Cell>
<Text>
<StatusLozenge text={issue.fields.assignee
? issue.fields.assignee.displayName
: 'Unassigned'}
appearance="defult"
/></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>
you can see also the images from the default Macro and my Macro and see what my idea :
Thanks a lot for your help!
Best,
Oday Rafeh