Dynamic select options in Custom UI macroConfig

[Kato Wildiers]

Hello,

I am currently working on a confluence macro app using custom UI. I followed these instructions to set up the macroConfig (https://developer.atlassian.com/platform/forge/add-configuration-to-a-macro/), and the config itself works, but I am experiencing limitations with dynamically loading select options. 

The macro involves two select fields: one for projects and another for issue types.

The project options are fetched via the REST api, and I am able to display them in the project select field. However, I am encountering difficulty in dynamically populating the options for the issue types based on the selected project. I want the issue type options to be fetched and displayed according to the project chosen by the user.

Here is a simplified version of my code:

async function getprojectsConfig () {
  const projectsRaw = await fetchJiraProjects()
  const projects = await Promise.all(
    projectsRaw.values.map(async project => {
      const details = await fetchJiraProject(project.id)
      const issueTypeNames = details.issueTypes.map(issueType => issueType.name)
      return {
        name: project.name,
        value: project.id,
        key: project.key,
        issueTypes: issueTypeNames
      }
    }))
  return projects
}

const Config = () => {
  const [projectOptionsTest] = useState(async () => await getprojectsConfig())
   return (
        <MacroConfig>
            <Select label="Project" name="project" >
                {projectOptionsTest && projectOptionsTest.map((option, index) => (
                    <Option key={index} label={option.name} value={option.name.toLowerCase()} />
                ))}
            </Select>
            <Select label="Issue Type" name="issueType" isMulti={false}>
/*Ideally, the options should come from the issueTypeNames associated with the selected project. 
                <Option label="Story" value="story"/>
                <Option label="Epic" value="epic"/>
                <Option label="Task" value="task"/>
            </Select>
        </MacroConfig>
  )
}

The challenge lies in the fact that the forge/ui select component does not provide an onChange or onSelect functionality, making it difficult to communicate the user's selected project to dynamically display the corresponding issue types.

If anyone has suggestions on how to achieve this dynamic behavior, your insights would be greatly appreciated. Thanks in advance!

[Charlie Misonne]

Hello Kato,

Did you ever find a solution for this?

I'm running into a similar issue and from what I can see on https://developer.atlassian.com/platform/forge/ui-kit/components/select/#props no events are supported for the Select element in macro configs.