How to clear or update value displayed of a select in MacroConfig?

Forge
, , ,
1

Hi,

Context:

Step 1: In MacroConfig panel, the user select a Jira project (Select Project)
Step 2: Depend of value selected on step 1, the user select a issue type (eg: Document) in a second select field (Select Issue Type)
image

Jira project nammed “Test” contain issue Type:

  • Document
  • Bug
  • Requirement

Jira project nammed “Test 2” contain issue Type:

  • Epic
  • Bug

Problem:

If user choose Test 2 in the first select Project, the value displayed in second select Issue Type doesn’t change (value remains at Document). So it doesn’t make sense. But the list of values inside select Issue Type are well updated by (Epic, Bug).

So how to clear the value displayed in the select Issue Type if value of Project change? or display the first value of second select Issue Type (Epic or Bug) ?

// Function that defines the configuration UI
const Config = () => {

  //Get projects list
  const [projects] = useState(fetchProjects);
    let projectKey;
    //If projectKey is undefined, choose default first project . 
    try {
      projectKey = useConfig().projectKey;
    } catch (e) {
      projectKey = projects[0].id;
    }

  //Get issueTypes list
  const [issueTypes] = useState(fetchIssueTypes(projectKey));
    let issueKey;
    //If issueKey is undefined or not in the list for a project selected, choose default first issueKey . 
    try {
        const result = issueTypes.issueTypes.find( issueType => issueType.id === useConfig().issueKey);
        issueKey = useConfig().issueKey;
    } catch (e) {
      issueKey =  issueTypes.issueTypes[0].id;
    }

  return (
    <MacroConfig>
          <Select label="Project" name="projectKey" isRequired="true">
            {projects.map(project => {
              return (
                <Option label={`${project.name} (${project.id})`} value={project.id} defaultSelected={project.id == "10000"}/>
              )
            })}
          </Select>

          <Select label="Issue Type" name="issueKey" isRequired="true" >
            {issueTypes.issueTypes.map(issueType => {
              return (
                <Option label={`${issueType.name} (${issueType.id})`} value={issueType.id} defaultSelected={issueType.id == "10000"}/>
              )
            })}
          </Select>

    </MacroConfig>
  );
};

export const config = render(<Config />);

Thx a lot